HTML CSS.menu-wrap .menu{flex-wrap: nowrap;}.menu-wrap .menu .item{width: calc((100% - 18px)/4);margin-left: 0;margin-top: 0;}.menu-wrap .menu .item ~ .item{margin-top: 0;}.menu-wrap .menu .item a + a{margin-top: 6px;} javaScriptif( $('.swiper-menu .swiper-slide').length > 1 ) { $('.s..
HTML tab1 tab2 tab 1 content tab 2 content CSS.tab_cnt{display: none;} javaScript// tab event const tabMenu = document.querySelectorAll(".tabs li"); const tabBtn = document.querySelectorAll(".tab_link"); const tabCont = document.querySelectorAll(".tab_cnt"); tabBtn.forEach(function (e) { e.addE..
자바스크립트로 셀렉트박스 만들기여러개 만들어 공통 소스 사용하고 클래스와 data 값으로 구분 ㅇㅇㅇ님 select1 select2 Default selectA selectB selectC let orderBrand = null;function initSelectLabel(){ const label = document.querySelectorAll('.label'); label.forEach(function(e){ lb.addEventListener('click', e => { let selectList = lb.nextElementSibling; let selectI..
.tab_cnt{display: none;}.tab_cnt.active{display: block;}const tabMenu = document.querySelectorAll('.tabs li'); const tabBtn = document.querySelectorAll('.tab_link') const tabCont = document.querySelectorAll('.tab_cnt'); tabBtn.forEach(function(e){ e.addEventListener('click', () => { const dataTab = e.dataset.tab; tabMenu.forEach(function(i){ ..
https://codepen.io/jimmybreeze/pen/VwXZReJ Swiper Grid...codepen.io slidesPerColumn, slidesPerGroup 활용해서 grid swiper 만들기 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 Slide 13 Slide 14 Slide 15 Slide 16 Slide 17 Slide 18 Slide 19 Slide 20 body { background: #eee; font-family..
setLottieAni(); function setLottieAni() { const lottieContainer = document.getElementById('lottie'); const lottieWrap = lottieContainer.closest('.lottie_wrap'); if (!lottieWrap) return; // data-type 속성값 읽기 const typeValue = lottieWrap.getAttribute('data-type'); if (!typeValue) { console.warn('data-type 속성이 지정되지 않았습니다.'); return; } const animationPath = `./lottie_${typeValue}.json`; ..
특정 구간에서 반복적으로 재생되어야 하는 유튜브 영상 삽입하기 iframe으로 삽입하고 loop를 넣었더니특정 구간 재생 시작 => 특정 구간 재생 종료까지는 되는데종료 시점에서 영상이 끝나면 아예 영상 맨처음부터 다시 재생이 됐다 구글링을 통해특정 구간을 반복 재생하려면 유튜브 api를 사용해야 한다는 것을 찾아서 문제 해결 // youtube loop play var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insert..