CSS 가장 간단한 네비게이션 바 만들기

네비게이션 바는 웹사이트의 사용자 경험(UX)에 큰 영향을 미치는 핵심 요소이므로, 그 디자인과 배치에 대한 이해는 필수적이다. 이번 실습을 통해 네비게이션 바의 구조와 요소 정렬 방식을 익히는 데 집중했다.

네비게이션 바의 기본 구조

일반적으로 네비게이션 바는 2~3개의 주요 그룹으로 나뉜다. 각 그룹은 적절한 여백을 통해 구분되며, 주요 메뉴를 배치하는 영역과 부가적인 도구나 기능(예: 로그인, 검색)으로 구성된다. 예를 들어, 상단에는 주요 링크들이 들어가고 그 하단에는 별도의 툴 박스를 배치하는 구조가 시각적으로 더 깔끔하게 보인다.

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>

여기서 <nav> 태그는 브라우저에 네비게이션 영역임을 알리고, <ul>과 <li> 태그를 사용해 각각의 메뉴를 그룹화하였다. main-nav 클래스는 주요 메뉴를, tool-box 클래스는 부가 도구를 담고 있어 역할을 명확히 분담할 수 있었다. 이때 큰 영역을 '컨테이너(container)', 작은 영역을 '박스(box)'로 나누어 생각하는 것이 관계를 이해하기 쉬웠다.

CSS 스타일링: Flexbox로 가로 정렬하기

기본 상태에서 네비게이션 바의 항목은 세로로 나열되는데, 이를 가로 정렬하기 위해 display: flex; 속성을 적용했다. 이를 통해 메뉴 항목들이 자연스럽게 한 줄로 정렬되며, 세련된 레이아웃을 완성할 수 있었다. 주요 CSS 코드는 다음과 같다:

nav, .main-nav {
    display: flex;
}

ul {
    list-style-type: none;
}

이와 같이 display: flex;를 적용하면 요소들이 자동으로 가로로 정렬되며, 각 항목의 배치를 제어하기 쉬워진다. Flexbox를 활용해 요소들의 정렬과 방향을 조정하는 방식은 간단하면서도 강력한 방법이다.

결론

네비게이션 바의 기본 구조를 이해하고 CSS로 간단한 디자인을 구현해봤다. 이런 기초적인 구조를 익혀야 더 복잡한 웹사이트를 만들 때 어렵지 않다.

다음 단계로는 네비게이션 바를 화면 가운데로 정렬하려고 한다.