전체 글

퍼블리싱/Vanilla JS

[Vanilla JS] 무한 슬라이더 구현

💡 목표외부 라이브러리를 사용하지 않고, 계속해서 반복되는 무한 슬라이더 구현 (마지막 슬라이드에 도달하면 다시 첫번째 슬라이드로)자동으로 넘어갈 것 📌 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 *..

퍼블리싱/CSS

[CSS] 서서히 증가하는 막대 그래프 구현

💡 목표 서서히 증가하는 막대그래프 구현 📌 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..

퍼블리싱/Vanilla JS

[Vanilla JS] 무한루프 슬라이더 구현

💡 목표외부 라이브러리를 사용하지 않고, 멈추지 않고 계속 반복하여 보여주는 무한루프 슬라이더 구현응용하여 띠배너로 사용! 📌 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..

퍼블리싱/Vanilla JS

[Vanilla JS] 탭 메뉴 구현 / 버튼마다 다른 컨텐츠 보여주기

💡 목표버튼을 누르면 각각 다른 컨텐츠가 보여지는 탭 메뉴 구현 📌 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; } /..

프로그래머스/Lv. 1

[프로그래머스] Lv.1 최소직사각형 / JS

📕 문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. ..

프로그래머스/Lv. 1

[프로그래머스] Lv.1 크기가 작은 부분 문자열 / JS

📕 문제 설명 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. ⭐ 제한사항 1 ≤ p의 길이 ≤ 18 p의 길이 ≤ t의 길이 ≤ 10,000 t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다. 💻 입출력 예 t p result "3141592" "271" 2 "500220839878..

안댕이
'분류 전체보기' 카테고리의 글 목록 (5 Page)