본문 바로가기

DEVELOP

(150)
[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..
[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..
[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..
[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() 함수의 경우 가까운 부모의 기준으로 상대경로를 구하는 성격을 띄는데, 이는 만약 컨텐츠 중에 텝 스타일이 있는 텝의 컨텐츠의 높이가 유연하게 움..
[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 },
[plugin] Swiper.js 포커스 맞추기 Swiper.js 플러그인을 사용하던 중, swiper-pagination-bullet이나 swiper-button-next, swiper-button-prev을 눌렀을 때 간헐적으로 해당 페이지가 나오지 않고 클릭하지 않은 페이지가 나오는 경우가 있다. 이럴땐 Swiper.js의 API의 touchEventsTarget: 'wrapper' 를 추가하면 해결된다.