웹사이트 상단에서 로고나 핵심 메뉴를 화면 중앙에 배치하고, 나머지 링크들은 좌우로 나누어 정렬하는 내비게이션 바는 매우 널리 쓰이는 레이아웃입니다. 이 글에서는 자바스크립트 없이 순수 CSS만으로 중앙에 링크(또는 로고)가 위치한 내비게이션 바를 만드는 방법을 예제와 함께 살펴보겠습니다.
핵심 CSS 기법
중앙 정렬된 내비게이션 바는 다음 세 가지 CSS 속성의 조합으로 구현할 수 있습니다.
- position: fixed — 내비게이션 바를 화면 최상단에 고정하여 스크롤과 무관하게 항상 보이도록 합니다.
- position: absolute — 왼쪽 링크 그룹(
left: 0)과 오른쪽 링크 그룹(right: 0)을 내비게이션 바의 양쪽 끝에 각각 배치합니다. - margin-left: 50% — 중앙 링크 컨테이너를 가로 방향 절반 지점부터 시작하게 하여 화면 중앙에 가깝게 배치합니다.
또한 :hover 가상 클래스와 .selected 클래스를 활용하면 마우스를 올렸을 때 밑줄 효과를 보여주고, 현재 머무르고 있는 페이지의 메뉴를 강조할 수 있습니다.
예제 코드
<!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(251, 255, 196);
overflow: auto;
height: auto;
}
.left-links{
display: inline-block;
position: absolute;
left: 0;
}
.right-links{
display: inline-block;
position: absolute;
right: 0;
}
.center-links{
display: inline-block;
margin-left: 50%;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
.links:hover {
border-bottom: 2px solid purple;
}
.selected{
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>
<div class="center-links">
<a class="links selected" href="#"> Home</a>
</div>
<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
화면 상단에는 연한 노란색 배경의 내비게이션 바가 고정되어 있으며, 왼쪽에는 'Login'과 'Register', 오른쪽에는 'Contact Us'와 'More Info' 메뉴가 배치되고, 중앙에는 현재 선택된 'Home' 링크가 보라색 밑줄과 함께 표시됩니다. 링크 위에 마우스를 올리면(hover) 동일한 보라색 밑줄 효과가 나타나는 것도 확인할 수 있습니다.