웹사이트에서 가장 많이 사용되는 UI 요소 중 하나인 수평 내비게이션 바(네비게이션 메뉴)는 CSS의 float 속성을 활용한 플로팅 목록 항목만으로도 간단하게 만들 수 있습니다. 별도의 프레임워크 없이 순수 HTML과 CSS만으로 구현하는 기본적인 방법을 소개합니다.
핵심 원리
수평 내비게이션 바를 만들 때 사용되는 주요 CSS 속성은 다음과 같습니다.
- list-style-type: none; — 목록 앞에 표시되는 불릿(bullet) 기호를 제거하여 깔끔한 메뉴 형태를 만듭니다.
- margin: 0; padding: 0; — 브라우저 기본 여백과 패딩을 초기화해 레이아웃이 어긋나지 않도록 합니다.
- 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>추가 팁
실무에서는 다음과 같은 스타일을 추가하면 더욱 완성도 높은 내비게이션 바를 만들 수 있습니다.
- 호버 효과:
li a:hover { background-color: #333; color: white; }처럼 마우스 오버 시 색상이 변하도록 설정하면 사용자 경험이 향상됩니다. - 링크 밑줄 제거:
text-decoration: none;을 추가하면 링크의 기본 밑줄이 사라져 더 깔끔해집니다. - float 해제: 내비게이션 바 아래 콘텐츠가 레이아웃에서 벗어나지 않도록 부모 요소에
overflow: hidden;을 지정하거나 clearfix 기법을 사용하는 것이 좋습니다.
참고로 최신 프로젝트에서는 float 대신 Flexbox(display: flex;)를 사용하는 방식이 권장되지만, 레거시 코드 유지보수나 CSS 기본 개념 학습에는 위와 같은 float 방식이 여전히 유용하게 활용됩니다.