-
[CSS Pattern] 도트(Dot) 패턴Front-end/CSS 2020. 7. 23. 14:12
네비게이션에서 자주 사용되는 도트 패턴에 대해서 알아보겠습니다.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./dot.css" /> <title>dot</title> </head> <body> <div class="wrap-box"> <ul class="dots"> <li class="dot active"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ul> </div> <script src="./dot.js"></script> </body> </html>구조는 전체를 감싸는 wrap-box와 도트들을 만들어내기 위해 ul, li를 활용하였습니다.
CSS
* { list-style-type: none; box-sizing: border-box; margin: 0; padding: 0; } .wrap-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 400px; margin: 0 auto; background-color: #34495e; } .dots { display: flex; justify-content: center; align-items: center; } .dot { width: 14px; height: 14px; margin: 0px 6px; border: 1px solid white; border-radius: 100%; background-color: transparent; cursor: pointer; } .active { background-color: white; border: none; }reset할 스타일을 초기에 설정해준 후, 전체를 감싸는 박스에서 flex를 통해 가운데 정렬하였고 ul에서도 마찬가지로 가운데 정렬 해주었습니다.
그리고 각각의 li에 대해서 margin으로 도트간의 간격을 넣어주고 활성화 이전의 스타일을 주었습니다. 여기서 background-color의 경우 부모의 색을 따라가서 wrap-box의 색을 가져오게 됩니다.
활성화 되었을 때(클릭 되었을 때)의 스타일도 따로 선언해주었습니다. 만약 특정 li(도트)를 클릭한다면 active 클래스를 추가해 해당 스타일을 적용시킬겁니다.
Javascript
const dots = document.querySelector(".dots"); dots.addEventListener("click", (e) => { const { tagName, classList } = e.target; if (tagName !== "LI") return; const active = document.querySelector(".active"); active.classList.remove("active"); classList.add("active"); });ul 요소를 가져와 클릭 이벤트를 통해 해당 li를 가져오게 하였고 li가 아닐 경우를 예외처리 해준 후 이벤트 타겟이 li일 경우 기존 active가 있는 요소를 찾아 활성을 해제하고 현재 내가 클릭한 li에 active 클래스를 추가해줍니다.
'Front-end > CSS' 카테고리의 다른 글
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기 (4) 2020.11.13 [CSS Pattern] 탭(Tab) 패턴 (0) 2020.07.23 CSS3 간단한 총정리 (2) 2020.06.30