CSS 인라인 목록 항목이란?
HTML의 목록 항목(<li>)은 기본적으로 세로로 쌓이는 형태로 표시됩니다. 그러나 CSS에서 display: inline 속성을 적용하면 목록 항목들이 한 줄에 나란히 배치되어 가로형(수평) 내비게이션 바를 손쉽게 만들 수 있습니다.
이 기법은 웹사이트 상단 메뉴 바를 구현할 때 가장 널리 사용됩니다. <ul>과 <li> 태그로 메뉴 구조를 작성한 뒤, 각 <li> 요소에 display: inline을 지정하기만 하면 됩니다.
핵심 스타일 정리
list-style-type: none— 목록 앞에 붙는 불릿(•) 기호를 제거합니다.margin: 0; padding: 0— 브라우저 기본 여백을 초기화해 레이아웃을 정돈합니다.display: inline— 목록 항목을 가로 방향으로 나열합니다.
예제 코드
아래 코드를 실행하면 현재 위치한 페이지를 강조 표시하는 가로 내비게이션 바가 완성됩니다:
<!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>코드 설명
.active 클래스는 사용자가 현재 머물고 있는 페이지의 메뉴 항목을 녹색 배경(#4CAF50)과 흰색 글자로 강조합니다. 또한 각 <li> 요소에 border-bottom을 추가하여 메뉴 항목들을 시각적으로 구분하고, display: inline 덕분에 모든 항목이 한 줄로 정렬되어 깔끔한 수평 메뉴가 완성됩니다.