CSS를 활용하면 각 메뉴 항목이 알약처럼 둥근 형태를 지닌 필(Pill) 내비게이션 메뉴를 간단하게 만들 수 있습니다. 핵심은 링크 요소에 border-radius 속성을 적용해 모서리를 둥글게 처리하고, 마우스 오버(hover) 시 배경색이 변하도록 설정하는 것입니다. 여기에 현재 머물고 있는 페이지를 표시하는 '선택됨(selected)' 상태 클래스까지 더하면 사용자가 자신의 위치를 직관적으로 파악할 수 있어 완성도가 한층 높아집니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document </title>
<style>
nav{
width: 100%;
background-color: rgb(255, 251, 251);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
color:black;
}
.links:hover {
background-color: rgba(129, 129, 129, 0.473);
}
.selected{
background-color: rgb(33, 126, 255);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1> Pill navigation example </h1>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>
코드 핵심 포인트
- .links 클래스:
display: inline-block으로 링크들을 가로 방향으로 나열하면서,padding과border-radius를 적용해 알약 모양의 버튼 형태를 완성합니다. - :hover 효과: 마우스를 올렸을 때 반투명 회색 배경이 나타나 사용자에게 시각적인 피드백을 제공합니다.
- .selected 클래스: 현재 페이지에 해당하는 메뉴 항목에 파란색 배경과 흰색 글자를 적용해 어느 페이지에 있는지 쉽게 알 수 있도록 합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같이 둥근 알약 형태의 내비게이션 메뉴가 출력됩니다.
