CSS로 수직 탐색 모음 만들기
웹사이트에서 세로 형태의 탐색 모음(내비게이션 바)을 만들 때는 HTML 목록 태그와 CSS를 조합하면 아주 간단하게 구현할 수 있습니다. 별도의 이미지나 자바스크립트 없이 순수 CSS만으로 깔끔한 세로 메뉴를 완성할 수 있습니다.
핵심 CSS 속성 이해하기
- list-style-type: none — 목록 앞에 기본으로 표시되는 불릿(•) 기호를 제거하여 메뉴처럼 보이게 합니다.
- margin / padding — 브라우저가 목록에 기본적으로 적용하는 여백을 조절해 레이아웃을 정돈합니다.
- display: block — 링크(a) 요소를 블록 레벨로 변경하면 텍스트가 아닌 전체 영역이 클릭 가능해지고, width 속성으로 메뉴 항목의 너비를 일정하게 유지할 수 있습니다.
- background-color — 각 메뉴 항목에 배경색을 지정해 시각적으로 구분되는 버튼 형태를 만듭니다.
예제 코드
아래 전체 코드를 HTML 파일로 저장한 뒤 브라우저에서 열면, 주황색 배경의 세로 탐색 모음이 완성됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 5;
padding: 5;
}
li a {
display: block;
width: 70px;
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#company">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>
추가 팁
실무에서는 마우스를 올렸을 때 색상이 변하는 :hover 효과나, 현재 페이지를 표시하는 .active 클래스를 함께 사용하면 더욱 완성도 높은 내비게이션 바를 만들 수 있습니다. 또한 여백 값은 통상 0으로 설정하고 필요한 만큼 개별적으로 지정하는 것이 일반적입니다.