![](https://maz.kr/wp-content/uploads/2024/04/howto-css-pill-nav-thumbnail.png)
w3.css
알약 탐색
CSS를 사용하여 알약 탐색 메뉴를 만드는 방법을 알아보자.
알약 탐색 만들기
1단계) HTML 추가
<div class="pill-nav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div>
2단계) CSS 추가
/* Style the links inside the pill navigation menu */ .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } /* Change the color of links on mouse-over */ .pill-nav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .pill-nav a.active { background-color: dodgerblue; color: white; }
기본 예시
예제 보기수직 알약 탐색
링크에 display: block 추가하면 가로가 아닌 세로로 표시된다.
.pill-nav a { display: block; color: black; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } .pill-nav a:hover { background-color: #ddd; color: black; } .pill-nav a.active { background-color: dodgerblue; color: white; }
기본 예시
예제 보기참고
W3C School - How TO - Pill Navigation