CSS로 하단 밑줄 스타일 내비게이션 링크 만드는 방법

웹사이트에서 현재 위치한 페이지나 마우스 오버(hover) 상태를 시각적으로 강조하는 가장 간단하고 효과적인 방법 중 하나는 하단 테두리(border-bottom)를 활용한 밑줄 스타일 내비게이션입니다. 별도의 이미지나 자바스크립트 없이 CSS만으로 깔끔하게 구현할 수 있습니다.

아래 예제 코드는 상단에 고정된 내비게이션 바를 만들고, 링크에 마우스를 올리면 보라색 밑줄이 나타나며, 현재 선택된 메뉴에는 밑줄이 항상 표시되도록 구성한 것입니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
   margin: 0px;
   margin-top: 60px;
   padding: 0px;
}
nav {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: rgb(251, 255, 196);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(0, 0, 0);
   text-decoration: none;
   font-size: 17px;
   font-weight: bolder;
}
.links:hover {
   border-bottom: 2px solid purple;
}
.selected {
   border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<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>
<h1>Hover on the above links</h1>
</body>
</html>

코드 설명

nav: position: fixed와 top: 0을 사용해 내비게이션 바를 화면 상단에 고정합니다. 배경색은 연노랑 계열로 지정했습니다.
.links: 모든 링크에 공통으로 적용되는 기본 스타일입니다. display: inline-block으로 링크를 한 줄에 나란히 배치하고, text-decoration: none으로 기본 밑줄을 제거합니다.
.links:hover: 마우스를 링크 위에 올리면 border-bottom: 2px solid purple에 의해 보라색 밑줄이 나타납니다.
.selected: 현재 방문 중인 페이지에 해당하는 메뉴 항목에 밑줄을 항상 표시해 사용자에게 위치를 알려줍니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.