웹 페이지에서 스크롤과 상관없이 화면 왼쪽에 항상 고정되어 있는 사이드 내비게이션 메뉴는 position: fixed 속성을 활용하면 간단하게 구현할 수 있습니다. 이 글에서는 순수 CSS만으로 고정 측면 탐색 메뉴를 만드는 방법을 예제 코드와 함께 단계별로 살펴보겠습니다.
예제 코드
아래는 CSS를 사용하여 고정 사이드 내비게이션 메뉴를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 39, 39);
overflow: auto;
height: 100%;
}
.links {
display: block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login </a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 화면 왼쪽에 어두운 배경의 세로 메뉴바가 나타나며, 페이지를 스크롤해도 메뉴가 항상 같은 위치에 고정됩니다.
코드 핵심 포인트
- position: fixed — nav 요소를 뷰포트 기준으로 고정시켜, 스크롤해도 메뉴가 화면 좌측에 그대로 유지됩니다.
- top: 0; left: 0 — 메뉴의 시작 위치를 화면 최상단 왼쪽 모서리에 맞춥니다.
- width: 200px; height: 100% — 메뉴바의 너비를 200px로 지정하고, 높이를 화면 전체로 설정합니다.
- overflow: auto — 메뉴 항목이 화면 높이를 초과할 경우 메뉴 내부에서 스크롤이 가능하도록 합니다.
- z-index: 1 — 다른 콘텐츠보다 위에 메뉴가 표시되도록 계층 순서를 지정합니다.
- .links:hover — 마우스를 올렸을 때 배경색이 변하는 호버 효과를 적용해 사용자 경험을 높입니다.
- .selected — 현재 머무르고 있는 페이지의 메뉴 항목을 강조하는 스타일입니다.
이처럼 position: fixed와 몇 가지 기본 스타일만 조합하면 별도의 JavaScript 없이도 깔끔하고 실용적인 고정 사이드 내비게이션 메뉴를 완성할 수 있습니다. 필요에 따라 너비, 색상, 폰트 크기 등을 조절해 자신만의 디자인으로 응용해 보세요.