-
[CSS Pattern] 탭(Tab) 패턴Front-end/CSS 2020. 7. 23. 17:00
네비게이션에서 자주 사용되는 탭 패턴에 대해서 알아보겠습니다.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tab</title> <link rel="stylesheet" href="./tab.css" /> </head> <body> <div class="wrap-box"> <ul class="tabs"> <li class="tab">HTML</li> <li class="tab">CSS</li> <li class="tab">Javascript</li> <li class="tab">React</li> </ul> </div> </body> </html>전체를 감싸는 div 내에 순서 없는 리스트들을 선언해주었습니다.
CSS
* { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .wrap-box { display: flex; justify-content: center; width: 100%; background-color: #fff; } .tabs { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .tab { position: relative; padding: 10px 15px; color: #151b26; background-color: transparent; cursor: pointer; } .tab::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #1ede9e; transition: width 300ms ease-out; } .tab:hover::after { width: 100%; }각각 li에게 가상의 after 요소를 추가하여 맨 좌하단 부분에 width가 0이고 heigth이 2인 가상의 요소를 하나 추가하였습니다.
가상의 요소인 after를 추가할 때는 content 프로퍼티가 필수이기 때문에 공백으로 선언하였습니다.
이 요소는 hover 되었을 때 li태그의 width 100%로 트랜지션 하여 탭 애니메이션이 완성됩니다.
'Front-end > CSS' 카테고리의 다른 글
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기 (4) 2020.11.13 [CSS Pattern] 도트(Dot) 패턴 (0) 2020.07.23 CSS3 간단한 총정리 (2) 2020.06.30