💡 목표외부 라이브러리를 사용하지 않고, 계속해서 반복되는 무한 슬라이더 구현 (마지막 슬라이드에 도달하면 다시 첫번째 슬라이드로)자동으로 넘어갈 것 📌 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 📌 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 .im..
💡 목표버튼을 누르면 각각 다른 컨텐츠가 보여지는 탭 메뉴 구현 📌 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; } /..
