전체 글 177

nth-child

/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */ .box:nth-child(7n){ background: red; } /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+22) { color: blue; } /* 1번째 부터 5번째 까지 box 배경색 변경 */ .box:nth-child(-n+5) { background: green; } /* 16번째 부터 19번째 까지 box 배경색 변경 */ .box:nth-child(n+16):nth-child(-n+19) { background: hotpink; } /* 마지막에서부터 순서를 계산 */ /* 마지막에서 부터 3번째 */ .box:nth-last-child(3) { background: go..

💅🏻 css 2022.03.07

파라미터 ID별로 스크립트 작동

보통 gnb나 인덱스에서 원페이지로 된 서브페이지로 이동 할 때 썼음 각각 링크를 누르면 연결된 ID의 탭이 열리거나 스크롤 돼야했음 $(document).ready(function () { const page_url = window.location.href; const page_id = page_url.substring(page_url.lastIndexOf("#") + 1); // alert(page_id); let tab = $('#hydrogen .subTab li'); let pannel = $('#hydrogen .subPannel > ul > li'); function tab_pannel(i){ tab.removeClass('active').eq(i).addClass('active'); pan..

🕹 스크립트 2022.03.07

슬릭슬라이더 애니메이션

텍스트 애니메이션 $('#mainSlider .slider .textWrap').addClass('active'); $('#mainSlider .slider').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ $('#mainSlider .slider .textWrap').removeClass('active'); $('#mainSlider .slider .slick-current .textWrap').addClass('active'); }); 2022.05.10 - [🕹 스크립트] - 슬릭슬라이더 일시정지/재생, 현재페이지/전체페이지, 프로그레스바 슬릭슬라이더 일시정지/재생, 현재페이지/전체페이지, 프로그레스바 메..

🕹 스크립트 2022.03.07
728x90