💡 목표 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 */ #sliderWrap .slider { position: absolute; top: 0; left: 0; hei..
