💡 목표버튼을 클릭하면 아래로 길어지는 아코디언 메뉴 구현 📌 HTML Q. 사용 시간은? A. 60분 사용 가능합니다. Q. 사용 방법은? A. 부착하여 사용하시면 됩니다. Q. 몇 회 사용 가능? A. 1일 1회 사용 가능합니다. 📌 CSS- transition은 height: auto에는 먹히지 않는다. max-height를 활용하는 방법으로 수정 가능하다./* reset */* { margin: 0; padding: 0; }button { display: block; border: none; }/* 기본 세팅 */.accordionMenu { width: 100vw; height: au..
💡 목표Swiper.js 없이 바닐라로 무한 슬라이더 구현하기.1. 5초동안 하나의 슬라이더를 보여주고, 프로그레스바로 남은 시간 출력2. 정지 버튼을 누르면 프로그레스바가 초기화되고, 자동 슬라이드가 멈춤3. 재생 버튼을 누르면 프로그레스바가 재시작죄고, 자동 슬라이드가 재개됨 📌 HTML 01 02 📌 CSS/* reset */* { margin: 0; padding: 0; }button { border: none; }/* 슬라이더 */.intro { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; }.introSlider { d..
💡 목표 0부터 원하는 숫자까지 숫자가 상승하는 애니메이션 구현 📌 HTML 📌 CSS #count { font-size: 30px; } 📌 JavaScript let countBox = document.querySelector('#count'); let count = 0; let num = 1234567890; let counting = setInterval(function () { if (count >= num) { count = num; clearInterval(counting); } else { count += 12345678; } countBox.innerHTML = new Intl.NumberFormat().format(count); }, 10); 💛 결과물 See the Pen Count A..
💡 목표 외부 라이브러리 없이 바닐라JS로 스크롤 이벤트 구현 📌 HTML Header Go Right Go Left Go Up Go Down 1 2 3 📌 CSS /* reset */ .wrap { width: 100%; margin: 0 auto; background-color: #eee; } li { list-style: none; } #header, #body { width: 50vw; margin: 0 auto; text-align: center; } #header { position: sticky; top: 0; left: 0; height: 5vw; margin-bottom: 20vw; line-height: 5vw; background-color: #ccc; z-index: 999; } #..
💡 목표외부 라이브러리를 사용하지 않고, 계속해서 반복되는 무한 슬라이더 구현 (마지막 슬라이드에 도달하면 다시 첫번째 슬라이드로)자동으로 넘어갈 것 📌 HTML prev next btn01 btn02 btn03 📌 CSS/* reset */li { list-style: none; }button { border: none; }div, ul, li, button { margin: 0; padding: 0; }#sliderWrap { position: relative; width: 300px; height: 200px; overflow: hidden; }/* slide item *..
💡 목표외부 라이브러리를 사용하지 않고, 멈추지 않고 계속 반복하여 보여주는 무한루프 슬라이더 구현응용하여 띠배너로 사용! 📌 HTML 01 02 03 04 05 06 📌 CSS/* reset */section { width: 100%; }li { display: inline-block; list-style: none; }/* 슬라이드 */.slideWrap { display: flex; position: relative; top: 0; left: 0; height: 200px; overflow: hidden; }.slideWrap .im..
