웹사이트에서 세로(수직) 형태의 내비게이션 메뉴는 사이드바나 카테고리 목록을 구성할 때 매우 유용하게 사용됩니다. CSS만으로도 간단한 몇 줄의 스타일 코드를 통해 깔끔하고 직관적인 세로 메뉴를 만들 수 있습니다.
핵심 원리는 간단합니다. 링크 요소(<a>)에 display: block 속성을 적용하면 각 링크가 한 줄 전체를 차지하게 되어 자연스럽게 세로로 쌓이는 메뉴가 완성됩니다.
CSS 세로 메뉴 예제 코드
다음은 CSS를 활용해 세로 메뉴를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
.Menu {
width: 200px;
}
.links {
background-color: rgb(251, 255, 188);
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.links:hover {
background-color: rgb(85, 85, 85);
color: white;
}
.links.selected {
background-color: rgb(0, 0, 0);
color: white;
}
</style>
</head>
<body>
<div class="Menu">
<a href="#" class="links selected">About Us</a>
<a class="links" href="#">Social Links</a>
<a class="links" href="#">Visit Us</a>
<a class="links" href="#">More info</a>
<a class="links" href="#">Phone Number</a>
</div>
</body>
</html>코드 설명
- .Menu: 메뉴 전체의 너비를 200px로 지정해 세로 메뉴의 기본 틀을 만듭니다.
- .links:
display: block으로 각 링크가 블록 요소처럼 동작하여 세로로 배치됩니다. 배경색과 패딩(12px)을 추가해 클릭 영역을 넓히고,text-decoration: none으로 밑줄을 제거했습니다. - .links:hover: 마우스를 올렸을 때 배경색이 진회색으로 바뀌고 글자색이 흰색으로 변경되어 시각적인 피드백을 제공합니다.
- .links.selected: 현재 선택된(활성화된) 메뉴 항목을 검은 배경으로 강조해 사용자가 자신의 위치를 쉽게 파악할 수 있도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같이 노란색 배경의 세로 메뉴가 화면에 표시됩니다. 마우스를 항목 위에 올리면 색상이 변하고, 선택된 항목은 검은색으로 강조됩니다.
마무리
이처럼 display: block 속성 하나만으로도 손쉽게 세로 메뉴를 구현할 수 있습니다. 여기에 hover 효과와 selected 클래스를 조합하면 사용자 경험을 한층 높인 내비게이션 메뉴를 완성할 수 있습니다. 필요에 따라 폰트 크기, 테두리, 그림자 효과 등을 추가해 디자인을 더욱 발전시켜 보세요.