본문 바로가기

분류 전체보기

 (244)
[plugin] swiper version6 이상 로컬 연결하기 swiper 예전 버전에선 압축 파일을 다운로드하여 로컬에 연결하면 되었었는데, 최신으로 변경 되면서 로컬로 연결하면 console 창에 swiper-bundle.min.js.map 연결이 원활하지 않다고 나온다. 따라서 https://swiperjs.com/get-started#download-assets 이 주소로 접속하여 아래 세가지 파일을 다운받는다. 1. swiper-bundle.min.css 2. swiper-bundle.min.js 3. swiper-bundle.min.js.map 다운 받는 방법은 해당 파일을 클릭하면 나오는 url에서 'browse'를 제거하면 해당 소스코드가 보일 것이다. 그 후 로컬에 연결하여 콘솔을 보면 노란색의 연결 이슈가 사라진것을 볼수 있다. 😊
[plugin] slick.js slide 컨텐츠 너비로 설정하기 slidesToShow 설정 후에 슬라이드 너비가 셋팅되어있기 때문에, 캡처본 처럼 두 줄이상으로 보일 경우가 있다. 그럴 경우에는 slick.js의 옵션인 variableWidth값을 셋팅 해주면 된다. 아래는 해당 옵션 추가 예시이다. let slidetNavIdSetting = { variableWidth: true, slidesToShow: 4, slidesToScroll: 1, swipe: false, infinite: false, asNavFor: sliderId, dots: false, centerMode: false, focusOnSelect: true, } $(sliderNavId).each(function(index, val){ if($(val).find('.menu-item').len..
[plugin] swiper Thumbs gallery 컨텐츠 높이 자동 조절 tab style 구현을 swiper Thumbs gallery 스타일로 나타낼 경우, effect를 'fade' 형태로 주면 되지만, 각 탭 컨텐츠 높이가 상이한 경우 swiper는 기본적으로 젤 높은 높이를 측정하여 통일 적용하기 때문에 각 컨텐츠 높이별로 영역을 잡고자 한다면 아래 옵션을 추가해주면 된다. const newSlider = new Swiper('.test-slider', { effect: 'fade', autoHeight : true, });
[css] 왼쪽, 오른쪽 화살표 만들기 html Previous Next css .card-tab-menu .slick-arrow { width: 60px; height: 68px; background-color: #fff; border: 1px solid #eee; font-size: 0px; } .card-tab-menu .slick-arrow::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: 1; border: 1px solid #b8b8b8; border-width: 0 2px 2px 0; margin-left: -2px; padding: 10px; } .card-tab-menu .slick-prev::after { left: 6..
[github] 기존 레파지토리 로컬에 연동 1. 기존 레파지토리 주소를 레파지토리에서 복사한다. 2. 로컬에서 해당 레파지토리를 연동할 위치에서 git bash를 실행한다. git bash는 git 홈페이지에서 설치하면 오른쪽마우스 클릭시 GUI와 Bash가 보일것이다. 3. 다음과 같은 명령어로 해당 레파지토리를 다운로드 받는다. git clone https://해당 레파지토리 주소 4. 그 후 자신이 사용하는 에디터에서 해당 레파지토리 경로를 오픈 후 터미널을 실행한다. 개인적으로 비주얼 스튜디오 코드 에디터를 추천. 5. 소스 수정후 아래와 같은 명령을 입력하여 해당 레파지토리에 푸시한다. git add . git commit -m "동기화" git pull origin main git push origin main 6. 해당 레파지토리 커..
[javascript] window 팝업 띄우기 스크립트 * ES6 script 문법을 사용하였습니다. marketing-agree-more 클래스 명을 가진 자세히보기 버튼을 클릭시 크기 커스텀된 윈도우 팝업 오픈하기. html 서비스 및 상품 추천, 각종 이벤트 소식을 받습니다. 자세히보기 > javascript const marketingBtn = document.querySelector('.marketing-agree-more'); marketingBtn.addEventListener('click', () => { const maketingPopup = window.open('mypage_member02_marketing_agree_popup.html', '_blank', 'width=583, height=816'); maketingPopup.onloa..
[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..

티스토리툴바