본문 바로가기

분류 전체보기

 (254)
[github] 브랜치 커멘드 라인에서 만들기 1. 현재 리모트와 로컬에 저장되어있는 브랜치 목록을 조회한다. git branch -al 2. main(master) 최상위 브랜치로 일단 체크아웃. git checkout main 3. 새로 만들고자 하는 브랜치명으로 체크아웃 git checkout -b newNameBranch 기존 있는 브랜치로 체크아웃 할때엔, git checkout branchName 4. 새로 만든 브랜치로 작업을 끝마쳤으면 평소 add, commit, pull, push 하던데로 하면 끝! git add . git commit -m "커밋하고자하는 내용" git pull origin main git push origin newBranchName git status 기존에 있는 브랜치로 푸시를 할땐, 아래와 같이 한다. gi..
[plugin] slick.js 중복 사용 텝 타이틀 리스트가 슬라이드 되는 텝 형식 스타일 구현을 위해, 슬라이더 플러그인 중 slick.js 플러그인을 사용하다가 중복 사용시 위의 텝 타이틀을 눌렀는데 아래 텝 컨텐츠가 바뀌는 진귀한 현상이 일어날때가 있다. 이럴 경우엔 tab title 슬라이더와 tab con 슬라이더를 부모 태그로 묶은 후 반복문을 통해 각 인덱스에 맞는 슬라이더가동작 되도록 스크립트를 짜야한다. HTML 1단메뉴 2단메뉴 3단메뉴 4단메뉴 이상메뉴 card-tab-area0 card-tab-area1 card-tab-area2 card-tab-area3 card-tab-area4 javascript // ## card tab slider $('.card-slider-frame').each(function(index, v..
[javascript] offset 절대 위치 구하기 const offsetEle = document.querySelector('.con-box'); const offsetEleY = offsetEle.getBoundingClientRect().top; const offsetEleAbsolTop = window.pageYOffset + offsetEleY; javascript 의 getBoundingClientRect() 내장 함수로 대상의 절대 위치를 구할 수 있다. 콘솔 출력 결과 left, top, bottom, x, y 등 해당 엘리먼트의 절대 위치를 확인 하여 원하는 값을 추출 가능 하다. offset() 함수의 경우 가까운 부모의 기준으로 상대경로를 구하는 성격을 띄는데, 이는 만약 컨텐츠 중에 텝 스타일이 있는 텝의 컨텐츠의 높이가 유연하게 움..
[github] merge 하기 브랜치가 main, feature/issue1 이 있다고 가정하자. feature/issue1를 main 으로 병합하고자 한다. 우선, feature/issue1에서 작업물을 작업하여 해당 브랜치에 push한 상태이다. 1. 그 상태에서 main으로 체크아웃한다. git checkout main 2. main 브랜치에서 feature/issue1 작업물을 가져와 병합한다. git merge feature/issue1 3. 병합 후 main(master) 브랜치에서 push을 해줘야 최종 반영된다. 레파지토리 페이지 커밋 상황에도 올라올 것이다. git push origin main(master)
[github] git branch -al 남아있는 브랜치 삭제 Command Line으로 로컬에서 만든 브랜치를 해당 원격 브랜치에 등록, 작업 후 머지 후에 더 이상 해당 브랜치를 사용하지 않는 경우 삭제하는 것이 좋다. 작업 유형마다 브랜치를 생성하여 작업하는것은 좋으나 더 이상 사용하지 않는 브랜치를 삭제해주자. 0. 우선 삭제할 브랜치가 아닌 main(master)로 브랜치를 두고, 브랜치 삭제 순서는 1. 로컬 브랜치 삭제 git branch -d 브랜치명 2. 로컬 브랜치 삭제 한것을 원격에 반영 git push -d origin 1번에서 삭제한 브랜치명 2번에서 git push origin 1번에서 삭제한 브랜치명 으로 하면 에러가 나올 것이다. 깃허브 브랜치 삭제후 반영으로 구글링하여 보면 대부분 git push origin 1번에서 삭제한 브랜치명 ..
[css] 모바일 이미지 흐림 해결 간혹 퍼블리싱을 하다가 이미지태그 및 백그라운드 이미지 설정 시 이미지 폰트가 흐려보이는 현상이 발생한다. 1. .img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; image-rendering: crisp-edges; } 2. background-image로 이미지를 넣었을 경우 : style="background-image: url('../images/');" .해당 백그라운드가 있는 태그 or 그 부모 { -ms-interpolation-mode: nearest-nei..
[plugin] Swiper.js pagination 클릭 시 자동 멈춤 해제 Swiper.js의 paginaiton 즉, swiper-pagination-bullet 를 클릭 시 autoplay: true;로 옵션 설정을 했을 시, 슬라이더가 자동으로 멈추는 현상이 있다. 이는 default로 자동 멈춤을 해놓았기 때문인데, 아래와 같이 autoplay 옵션을 변경해주면 swiper-pagination-bullet swiper-button-next swiper-button-prev 를 클릭 했을 때 슬라이더 자동 멈춤이 사라진다. autoplay: { delay:4000,// 하나의 슬라이드에서 다음 슬라이드 또는 이전 슬라이드 이동 시 소요 시간 disableOnInteraction: false },
[VSCode] Project Manager VS Code를 사용할 때 두개 이상의 프로젝트를 작업할 경우 Live Server는 하나의 프로젝트에 연결하면 중복이 되지 않았으므로 항상 New Window로 VS Code 창을 하나 더 열어 각각 프로젝트를 Live Server 하였다. 하지만 Project Manager 플러그인을 설치하면 path를 저장해 두고 필요할 때 마다 오픈하여 Live Server를 걸 수 있다. 1. 왼쪽 사이드바 플러그인 메뉴(Extensions: ctrl+shift+x) 클릭 2. Project Manager 검색 후 Install 3. 설치 후 왼쪽 사이드바에 Project Manager 아이콘이 생성 된 모습을 볼 수 있다. 4. Project Manager 클릭 후, FAVORITES를 활성화 하여 오른쪽 연..

티스토리툴바