CSS로 동일한 너비의 내비게이션 링크를 가진 내비게이션 바 만드는 방법

웹사이트 상단에 위치하는 내비게이션 바에서 각 메뉴 링크의 너비가 제각각이면 화면이 어수선해 보일 수 있습니다. 이번 글에서는 CSS만을 사용하여 모든 내비게이션 링크가 동일한 너비를 갖도록 만드는 방법을 소개합니다.

핵심 원리

동일한 너비의 링크를 만드는 핵심은 다음 두 가지입니다.

링크 요소에 display: inline-block;을 적용하여 가로로 나란히 배치하면서도 너비 조절이 가능하게 합니다.
vw(viewport width) 단위를 사용하여 전체 화면 폭을 기준으로 각 링크의 너비를 균등하게 지정합니다. 예를 들어 링크가 5개라면 각 링크에 width: 20vw;를 설정하면 전체 너비가 정확히 화면 폭(100vw)과 일치하게 됩니다.

예제 코드

다음은 동일한 너비의 내비게이션 링크를 가진 내비게이션 바를 구현한 완전한 코드입니다.

<!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;
}
*,*::before,*::after{
    box-sizing: border-box;
}
nav{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    width: 20vw;
    padding: 17px;
    display: inline-block;
    text-align: center;
    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>
<h1>Equal width navigation menu</h1>
</body>
</html>

코드 설명

nav 요소에는 position: fixed;와 top: 0;을 적용하여 스크롤과 관계없이 항상 화면 최상단에 고정되도록 했습니다.
.links 클래스에서 width: 20vw;를 지정하여 5개의 링크가 각각 화면 폭의 20%씩 차지하도록 하여 균등한 너비를 만들었습니다.
text-align: center;로 링크 텍스트를 중앙 정렬하고, padding: 17px;로 클릭 영역을 넓혀 사용성을 높였습니다.
:hover 가상 클래스로 마우스를 올렸을 때 배경색이 변하도록 하고, .selected 클래스로 현재 선택된 메뉴를 시각적으로 강조했습니다.

실행 결과

위 코드를 실행하면 화면 상단에 고정된 내비게이션 바가 나타나며, Home, Login, Register, Contact Us, More Info 다섯 개의 링크가 모두 동일한 너비로 균형 있게 배치된 것을 확인할 수 있습니다.