💡 목표 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..
💡 목표 서서히 증가하는 막대그래프 구현 📌 HTML 📌 CSS /* reset */ ul { list-style: none; } div, ul, li { margin: 0; padding: 0; } /* 그래프 */ .graphWrap { position: relative; width: 300px; height: 300px; margin: 20px auto 0; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; } .graphWrap .graph > div { position: absolute; bottom: 0; width: 69px; border-radius: 50px 50px 0 0; } .graphWrap .graph > div#item1..
💡 목표외부 라이브러리를 사용하지 않고, 멈추지 않고 계속 반복하여 보여주는 무한루프 슬라이드 구현 📌 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 .imgSlide { display: flex; align-items: center; justify-content: space-between; padding-left: 0; } .slideW..
💡 목표버튼을 누르면 각각 다른 컨텐츠가 보여지는 탭 메뉴 구현 📌 HTML 1 2 3 4 📌 CSS/* reset */ ul { list-style: none; } button { border: none; } /* 컨텐츠 */ .tab_menu { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90%; box-sizing: border-box; } .tab_menu .videoList { width: 100%; margin-bottom: 10px;} .tab_menu .videoList li .cont{ display: none; width: 100%; height: 100px; } /..
