자바스크립트로 사용자 브라우저 체크하기navigator.userAgent 사용 indexOf()를 활용하는데 > -1 도 되고 != 1 도 가능 const browserCheck = () => { const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.indexOf("edge") > -1){ return "edge"; } else if (userAgent.indexOf("whale") > -1){ return "whale"; } else if (userAgent.indexOf("chrome") > -1){ return "chrome"; } else if (userAgent.indexOf("firefox") > ..
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`; ..
