HTML／CSS91 [HTML/CSS] 움직이는 검색창 만들기 클릭하면 열리는 방식의 검색창입니다. 매번 같은 검색창말고 새로운 형태의 검색창을 활용해보세요!. const search = document.querySelector(".search"); const btn = document.querySelector(".btn"); const input = document.querySelector(".input"); btn.addEventListener("click", () => { search.classList.toggle("active"); input.focus(); }); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: bor.. 2022. 7. 27. [HTML/CSS] 체크박스 토글 버튼 만들기 안녕하세요. 오늘은 toggle 버튼을 한번 만들어보도록 하겠습니다. 소스코드 index.html toggle_btn.css /* 멘토링 상태변경 토글 */ /* 멘토 상태변경 토글 */ .toggle_box { display: flex; align-items: center; z-index: -1; margin-top: 20px; } #custom_input { display: none; } #custom_input + label.toggle_btn_label { position: relative; width: 12rem; height: 3rem; } #custom_input + label.toggle_btn_label > span { position: absolute; cursor: pointer; t.. 2022. 7. 11. [HTML] Expanding Cards 만들기 오늘은 메인화면 등 다양한 곳에서 사용 될 수 있는 Expanding Cards 을 구현해보도록 하겠습니다. index.html Explore The World Wild Forest Sunny Beach City on Winter Mountains - Clouds script.js const panels = document.querySelectorAll(".panel"); panels.forEach((panel) => { panel.addEventListener("click", () => { removeActiveClasses(); panel.classList.add("active"); }); }); function removeActiveClasses() { panels.forEach((panel) =>.. 2022. 7. 4. [HTML/CSS] 아코디언 만들기 안녕하세요. 오늘은 부트스트랩에서 제공하는 컴포넌트 중에서 Accordion을 한번 따라서 만들어보겠습니다. 부트스트랩을 사용하면 Accordion을 빠르게 사용할 수 있지만, 제가 원하는 대로 동작하지 않아서 한번 새로 만들어봤습니다. 부트스트랩으로 구현하는 방법이 궁금하면 다음 링크로 들어가서 확인하시면 됩니다. https://getbootstrap.com/docs/5.2/components/accordion/ Accordion Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. getbootstrap.com 소스코드 index.html + js script 첫번째 아코디언 리스트 아이템1 .. 2022. 6. 26. [HTML] Progress step 만들기 오늘은 회원가입 등 다양한 곳에서 사용 될 수 있는 Progress Step 을 구현해보도록 하겠습니다. 1 2 3 4 Prev Next const progress = document.getElementById("progress"); const prev = document.getElementById("prev"); const next = document.getElementById("next"); const circles = document.querySelectorAll(".circle"); let currentActive = 1; next.addEventListener("click", () => { currentActive++; if (currentActive > circles.length) { curr.. 2022. 6. 19. [HTML / CSS] 범위 슬라이더 (range slider) 사용해보기 오늘은 range slider 를 사용해보겠습니다. 먼저 가장 기본적인 형태를 만들어보겠습니다. 태그의 type 속성을 "range" 로 설정하면 아래와 같은 형태의 range slider 가 만들어집니다. 이제 css 를 입혀 보겠습니다. Value: type 이 "range" 이고, id 가 "myRange" 이며 class명이 "slider"인 엘리먼트를 만듭니다. 최댓값과 최솟값을 각각 1, 100으로 지정하고, 초기값은 100으로 설정합니다. 그리고 class명이 "slidecontainer"인 태그로 감싸줍니다. 그리고 다음과 같은 css 코드를 작성합니다. body { margin: 0 auto; width: 50%; } .slidecontainer { width: 100%; margin-t.. 2022. 5. 23. [HTML / CSS] css border 속성을 이용해서 삼각형 도형 만들기 CSS border 속성을 이용해서 삼각형 도형을 그려보겠습니다. border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다. 그리고 top, right, bottom, left 각각의 border 속성을 따로 지정해줄 수 있습니다. ex) 아래의 정사각형은 class 가 "triangle"인 요소이고, top, right, bottom, left 테두리 속성을 각기 다른 색깔로 지정했습니다. 위에서는 border 의 두께를 모두 3px으로 줬는데, 만약 두께를 증가시키면 어떻게 될까요? 두께를 50px 로 설정해보겠습니다. 테두리 두께가 아주 많이 늘어났고 각 변의 테두리의 경계가 대각선으로 나타나는 것을 보실 수 있습니다. 만약 요소의 width, h.. 2022. 5. 10. [HTML / CSS] 3D 텍스트 만들기 안녕하세요 오늘은 텍스트를 3D로 만들어보겠습니다. *결과 1. text-shadow css 함수 중에서 text-shadow 를 사용하면 텍스트에 그림자 효과를 적용할 수 있습니다. text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앱니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의.. 2022. 4. 20. [HTML / CSS] 슬라이드 아이콘 만들기 안녕하세요 오늘은 홈페이지에서 슬라이드 아이콘을 만들어 보겠습니다. 마우스를 올리면 아이콘이 슬라이드 됩니다. 밀어서 입장하기 입장! 위 코드 중에서 아래와 같이 left 100% 로 설정하면 마우스를 올렸을 때 버튼이 오른쪽으로 움직이게 됩니다. .btn-slide:hover span.circle { left: 100%; margin-left: -45px; background-color: #36f355; } * 참고로 span태그는 p태그, div 태그와 비슷하지만 다릅니다. 차이점을 비교해보자면 아래와 같은 결과를 볼 수 있습니다. 코드로 보시면 아래와 같습니다. div{border:1px solid blue;} p{border:1px solid red;} span{border:1px solid gr.. 2022. 2. 8. 이전 1 ··· 5 6 7 8 9 10 11 다음
