[CSS] 내비게이션 바 만들기

소요 시간: 2분 조회수: 329

웹사이트를 탐색할 때 사용자 경험을 향상시키는 중요한 요소 중 하나는 네비게이션 바(Navigation Bar)입니다. 네비게이션 바는 사용자가 사이트 내 다양한 페이지로 쉽게 이동할 수 있도록 돕는 중요한 UI 컴포넌트입니다. 이 글에서는 네비게이션 바의 역할과 주요 구성 요소를 살펴보고, HTML과 CSS를 사용하여 네비게이션 바를 구현하고 스타일링하는 방법을 상세히 설명합니다. 이를 통해 깔끔하고 직관적인 네비게이션 바를 만들어 사용자 경험을 최적화하는 방법을 배울 수 있습니다.


네비게이션 바(Navigation Bar)란?

네비게이션 바(Navigation Bar)는 웹사이트나 애플리케이션에서 사용자가 다른 페이지나 섹션으로 이동할 수 있도록 돕는 중요한 UI 요소입니다. 주로 웹 페이지의 상단이나 측면에 위치하며, 링크나 버튼을 포함하여 사용자가 원하는 정보로 쉽게 접근할 수 있도록 합니다.

주요 기능과 목적

일반적인 구성 요소


예시 코드

대부분의 웹사이트 상단은 네비게이션 바가 자리를 차지합니다. HTML 코드는 아래와 비슷합니다. 브랜드 로고와 메뉴들로 구성되어 있습니다.

HTML

아래는 네비게이션 바의 간단한 HTML 예시입니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
</head>
<body>
    <div class="navbar">
        <div class="logo">
            MyLogo
        </div>
        <div class="menu">
            <a href="#home">Home</a>
            <a href="#services">Services</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </div>
    </div>
</body>
</html>

각 태그들이 어떤 역할을 하는지 하나씩 살펴보겠습니다.


CSS

CSS를 사용하여 네비게이션 바의 배경색, 텍스트 색상, 패딩, 호버 효과 등을 정의합니다.

    body {
        font-family: Arial, sans-serif;
    }
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        padding: 10px 20px;
    }
    .navbar a {
        color: white;
        text-decoration: none;
        padding: 14px 20px;
        display: block;
    }
    .navbar a:hover {
        background-color: #ddd;
        color: black;
    }
    .navbar .logo {
        font-size: 24px;
        font-weight: bold;
    }
    .navbar .menu {
        display: flex;
    }

주어진 CSS 코드를 해석해보겠습니다.

.navbar 스타일

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
}

.navbar 클래스는 네비게이션 바의 스타일을 정의합니다. display: flex;는 플렉스 박스 레이아웃을 사용하여 자식 요소들을 배치할 수 있게 합니다. justify-content: space-between;은 자식 요소들 사이의 공간을 균등하게 분배하여 양 끝으로 정렬합니다. align-items: center;는 자식 요소들을 세로축 중앙에 정렬하여 보기 좋게 배치합니다. background-color: #333;은 네비게이션 바의 배경색을 어두운 회색으로 설정합니다. padding: 10px 20px;은 네비게이션 바의 안쪽 여백을 위아래로 10px, 좌우로 20px 설정하여 여유 공간을 만듭니다.

.navbar a 스타일

.navbar a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    display: block;
}

.navbar a 스타일 규칙은 네비게이션 바 내의 모든 링크에 적용됩니다. color: white;는 링크 텍스트의 색상을 흰색으로 설정합니다. text-decoration: none;은 링크 텍스트에서 밑줄을 제거합니다. padding: 14px 20px;은 링크의 안쪽 여백을 위아래로 14px, 좌우로 20px 설정하여 클릭 가능한 영역을 넓힙니다. display: block;은 링크를 블록 요소로 만들어 전체 영역을 클릭할 수 있도록 합니다.

.navbar a:hover 스타일

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.navbar a:hover 스타일 규칙은 사용자가 링크 위에 마우스를 올렸을 때의 상태를 정의합니다. background-color: #ddd;은 배경색을 밝은 회색으로 변경하여 시각적인 피드백을 제공합니다. color: black;은 텍스트 색상을 검정으로 변경하여 더욱 뚜렷하게 보이도록 합니다.

.navbar .logo 스타일

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

.navbar .logo 스타일 규칙은 네비게이션 바의 로고에 적용됩니다. font-size: 24px;은 로고 텍스트의 크기를 24px로 설정하여 눈에 잘 띄게 합니다. font-weight: bold;은 로고 텍스트를 굵게 설정하여 강조합니다.

.navbar .menu 스타일

.navbar .menu {
    display: flex;
}

.navbar .menu 스타일 규칙은 네비게이션 바의 메뉴 항목을 포함하는 컨테이너에 적용됩니다. display: flex;는 플렉스 박스를 사용하여 자식 요소들을 가로로 배치할 수 있도록 합니다. 이를 통해 메뉴 항목들이 일렬로 정렬됩니다.


이 CSS 코드는 웹 페이지에 깔끔하고 일관된 네비게이션 바 스타일을 적용합니다. 플렉스 박스를 사용하여 요소들을 정렬하고, 배경색과 텍스트 색상을 설정하여 시각적으로 명확한 네비게이션 바를 만듭니다. 링크에 대한 호버 효과를 추가하여 사용자가 상호작용할 때 시각적 피드백을 제공하며, 로고와 메뉴 항목을 스타일링하여 네비게이션 바가 깔끔하고 보기 좋게 디자인됩니다.

인기글

CSS 리스트