CSS 네비게이션 바 가운데로 정렬하기

소요 시간: 5분 조회수: 46

네비게이션 바(Navigation Bar)를 만들고 나니, 이제 이를 가운데 정렬하는 방법에 대해 정리할 때가 되었다. 웹사이트의 레이아웃을 구성할 때 네비게이션 바가 화면 중앙에 위치하면 사용자 경험이 한층 더 깔끔하고 직관적이 된다.

오늘은 max-width, margin-left: auto와 margin-right: auto를 활용해 네비게이션 바를 가운데로 정렬하는 방법을 알아보았다.


max-width와 margin을 활용한 가운데 정렬

먼저, 네비게이션 바를 가운데에 정렬하기 위해 max-width 속성을 사용하여 바의 최대 너비를 설정했다. 이 속성을 사용하면 네비게이션 바가 지나치게 넓어지지 않으면서도, 화면 크기에 따라 적절히 조정된다.

이후 margin-left: auto와 margin-right: auto를 적용해 네비게이션 바가 수평 가운데에 배치되도록 했다.

HTML 구조는 기존과 동일하게 유지된다:

<nav class="nav-bar">
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
    <ul class="tool-box">
        <li><a href="#">Login</a></li>
    </ul>
</nav>

이제 여기에 추가적인 CSS 스타일링을 적용한다:

.nav-bar {
    max-width: 1200px; /* 네비게이션 바의 최대 너비를 설정 */
    margin-left: auto; /* 왼쪽 마진 자동 설정으로 가운데 정렬 */
    margin-right: auto; /* 오른쪽 마진 자동 설정으로 가운데 정렬 */
}

이제 .nav-bar 클래스에 대해 max-width를 설정하면, 네비게이션 바의 최대 너비가 1200px로 제한되며, 창 크기가 줄어들 때는 유연하게 대응한다.

이와 함께 margin-left: auto와 margin-right: auto는 바가 수평 중앙에 위치하도록 설정해 준다.


부가 설명 및 유용한 팁


오늘의 결론

max-width와 자동 여백(auto margin)을 활용해 네비게이션 바를 가운데 정렬하는 방법은 간단하면서도 매우 강력하다. 이 기본적인 레이아웃 조정 기법을 통해 웹사이트의 시각적 균형을 맞출 수 있었다.

앞으로는 더 다양한 레이아웃 기법을 익혀 네비게이션 바와 다른 요소들을 효과적으로 배치해볼 생각이다.

다음에는 네비게이션 바의 색상과 애니메이션 효과를 추가하여 사용자와의 상호작용을 더욱 향상시켜볼 것이다.

인기글

CSS 리스트