내비게이션 바에서 현재 머무르고 있는 페이지의 링크를 강조하려면 .active 클래스에 스타일을 지정하면 됩니다. 강조하고 싶은 메뉴 항목의 <a> 태그에 class="active"를 추가한 뒤, CSS에서 해당 클래스에 배경색과 글자색 등을 설정하면 사용자가 자신이 어떤 페이지에 있는지 한눈에 파악할 수 있어 웹사이트의 사용성이 크게 향상됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 70px;
background-color: #F0E7E7;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#company" class="active">Company</a></li>
<li><a href="#product">Product</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
코드 핵심 포인트
- ul 스타일:
list-style-type: none;으로 기본 불릿(점)을 제거하고,margin과padding을 0으로 초기화해 메뉴가 화면 가장자리에 딱 붙도록 정렬합니다. - li a 스타일:
display: block;을 적용하면 링크의 클릭 영역이 텍스트 전체가 아닌 블록 전체로 확장되어 클릭하기 쉬워집니다. 여기에 기본 배경색(#F0E7E7)을 지정합니다. - .active 스타일: 현재 페이지에 해당하는 링크에 초록색 배경(
#4CAF50)과 흰색 글자색(white)을 적용해 다른 메뉴와 시각적으로 구분됩니다.
위 코드를 실행하면 'Company' 메뉴만 초록색 배경에 흰색 글자로 표시되어, 현재 선택된(활성화된) 링크임을 명확하게 보여줍니다. 실제 서비스에서는 각 페이지마다 해당 메뉴 항목에 class="active"를 넣거나, JavaScript로 현재 URL과 일치하는 링크에 자동으로 클래스를 추가하는 방식도 많이 사용됩니다.