CSS에서 플로팅(float) 목록 항목은 목록 요소에 float 속성을 적용하여 항목들을 나란히 배치하는 기법입니다. 이 방법을 활용하면 세로로 나열되는 일반적인 목록을 손쉽게 가로형 내비게이션 바(수평 메뉴)로 변환할 수 있습니다.
핵심 원리
가로 내비게이션 바를 만들려면 다음 세 가지 CSS 설정이 필요합니다.
- list-style-type: none; — 목록 앞에 붙는 불릿(bullet) 기호를 제거합니다.
- float: left; — 각 목록 항목(li)을 왼쪽부터 차례대로 나란히 배치합니다.
- display: block; — 링크(a) 요소를 블록으로 만들어 클릭 영역 전체를 확장하고, 패딩과 배경색을 자유롭게 적용할 수 있게 합니다.
예제 코드
아래 코드를 실행하면 플로팅 목록 항목으로 구성된 가로 내비게이션 바를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#news">News</a></li>
<li><a href = "#contact">Contact</a></li>
<li><a href = "#about">About</a></li>
</ul>
</body>
</html>코드 설명
1. ul 스타일 초기화
margin: 0;과 padding: 0;으로 기본 여백을 제거하고, list-style-type: none;으로 불릿 기호를 없애 깔끔한 메뉴 형태를 만듭니다.
2. li 항목 플로팅
float: left;를 적용하면 각 목록 항목이 왼쪽 정렬된 채로 수평 방향으로 배치됩니다.
3. 링크 영역 스타일링
display: block; 덕분에 링크의 클릭 가능한 영역이 텍스트뿐 아니라 패딩 영역까지 확장됩니다. 여기서는 8px의 안쪽 여백과 주황색(orange) 배경을 적용해 메뉴 버튼처럼 보이도록 했습니다.
참고 사항
플로팅 요소는 부모 컨테이너의 높이 계산에서 벗어나기 때문에, 메뉴 아래에 다른 콘텐츠가 있다면 overflow: hidden; 또는 clearfix 기법으로 float를 해제하는 것이 좋습니다. 또한 최근에는 Flexbox(display: flex;)를 사용하면 float 없이도 더 유연하게 가로 메뉴를 구현할 수 있습니다.