웹 페이지를 아래로 스크롤해도 항상 화면 상단에 고정되어 있는 메뉴를 본 적이 있을 것입니다. CSS의 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:60px;
padding: 0px;
}
nav{
position: fixed;
top: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-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);
}
.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>
<div class="sample-content">
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
</div>
</body>
</html>코드 핵심 포인트
- position: fixed; — nav 요소를 브라우저 뷰포트(viewport) 기준으로 고정시켜, 스크롤과 관계없이 항상 같은 위치에 유지됩니다.
- top: 0; — 메뉴를 화면의 맨 위에 배치합니다.
- width: 100%; — 메뉴가 화면 전체 너비를 차지하도록 설정합니다.
- body { margin-top: 60px; } — 고정된 메뉴가 본문 콘텐츠를 가리지 않도록 페이지 상단에 여백을 확보하는 중요한 부분입니다.
- .links:hover — 마우스를 올렸을 때 배경색이 변하는 호버 효과로 사용자 경험을 높입니다.
실행 결과
위 코드를 실행하면 다음과 같이 화면 상단에 짙은 회색 배경의 고정 메뉴가 나타납니다.
페이지의 콘텐츠가 화면 높이보다 길어져 스크롤하면, 아래 이미지처럼 본문 텍스트가 고정된 내비게이션 바 아래로 지나가는 것을 확인할 수 있습니다. 메뉴는 언제나 화면 상단에 그대로 유지됩니다.
마무리
이처럼 position: fixed 속성 몇 줄만으로도 스크롤과 무관하게 항상 화면에 노출되는 고정 메뉴를 손쉽게 만들 수 있습니다. 메뉴 높이만큼 body에 상단 여백을 주는 것만 잊지 않으면, 콘텐츠가 메뉴에 가려지는 문제 없이 깔끔한 고정 내비게이션 바를 완성할 수 있습니다.