웹사이트에서 가장 많이 사용되는 UI 요소 중 하나인 수평 내비게이션 바는 CSS만으로 간단하게 만들 수 있습니다. 핵심 원리는 리스트 항목인 <li> 요소의 display 속성을 inline으로 설정하여, 기본적으로 세로로 쌓이는 목록을 한 줄로 나란히 배치하는 것입니다.
기본 원리
<ul> 태그는 기본적으로 목록 앞에 점(bullet)이 붙고 여백(margin)과 패딩(padding)이 설정되어 있습니다. 따라서 다음과 같은 스타일을 먼저 적용해야 깔끔한 내비게이션 바를 만들 수 있습니다.
list-style-type: none;— 목록 앞의 불릿 포인트를 제거합니다.margin: 0; padding: 0;— 브라우저 기본 여백을 초기화합니다.display: inline;— 각 <li> 항목을 가로 방향으로 나열합니다.
예제 코드
아래 코드를 실행하면 현재 페이지를 나타내는 활성화된 메뉴(녹색 배경)가 포함된 수평 내비게이션 바를 확인할 수 있습니다.
<!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. ul 스타일 초기화
list-style-type: none;으로 불릿을 제거하고, margin과 padding을 0으로 설정해 브라우저 기본 스타일의 영향을 없앱니다.
2. li 항목을 가로 배치
display: inline; 속성 덕분에 각 메뉴 항목이 세로가 아닌 가로 방향으로 정렬됩니다. 예제에서는 하단 경계선(border-bottom)도 함께 지정되어 있어 메뉴 구분이 더 명확해집니다.
3. 활성 메뉴 강조
.active 클래스를 적용한 항목은 녹색 배경(#4CAF50)과 흰색 글자로 표시되어, 사용자가 현재 머무르고 있는 페이지를 쉽게 인식할 수 있습니다.
추가 팁
실무에서는 display: inline; 대신 display: inline-block; 또는 Flexbox(display: flex;)를 사용하기도 합니다. 특히 Flexbox를 활용하면 메뉴 항목 간 간격 조절, 중앙 정렬, 반응형 레이아웃 구현이 훨씬 수월해지므로 참고하시기 바랍니다.