CSS에서 인라인(inline) 목록 항목을 활용하면 간단하게 가로형 내비게이션 바를 만들 수 있습니다. 핵심은 목록 항목인 <li> 요소에 display: inline; 속성을 지정하여 세로로 나열되던 메뉴를 가로 방향으로 배치하는 것입니다.
기본 원리
<ul> 태그는 기본적으로 불릿(bullet)과 여백(padding/margin)이 적용되어 있으므로, 먼저 list-style-type: none;, margin: 0;, padding: 0;으로 초기화해야 깔끔한 내비게이션 바를 만들 수 있습니다.
예제 코드
아래 코드를 실행하면 가로형 내비게이션 바가 어떻게 구현되는지 확인할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.active {
background-color: #4CAF50;
color: white;
}
li {
border-bottom: 1px solid #555;
display: inline;
}
</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>코드 설명
1. 목록 스타일 초기화
list-style-type: none;으로 불릿 기호를 제거하고, margin과 padding을 0으로 설정해 브라우저 기본 여백을 없앱니다.
2. 인라인 배치
display: inline; 속성 덕분에 각 <li> 항목이 줄바꿈 없이 한 줄에 나란히 배치됩니다. 이것이 가로형 내비게이션 바의 핵심입니다.
3. 활성 메뉴 강조
.active 클래스는 현재 방문 중인 페이지의 메뉴를 초록색(#4CAF50) 배경과 흰색 글자로 강조하여 사용자가 자신의 위치를 쉽게 파악하도록 돕습니다.
참고 사항
실무에서는 display: inline-block; 또는 최신 CSS 레이아웃 기법인 Flexbox(display: flex;)를 사용하는 것이 더 권장됩니다. Flexbox를 활용하면 항목 간 간격 조절, 세로 정렬, 반응형 대응 등을 훨씬 유연하게 처리할 수 있습니다.