코딩 스쿨 CSS

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How_To
CSS Comments
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Padding
CSS Height-Width
CSS Box Model
CSS Outline
CSS Text
CSS Fonts
CSS Icons
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Combinators
CSS Pseudo-class
CSS_Pseudo-element
CSS_Opacity
CSS Navigation_Bar
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attr Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS Units
CSS Specificity
CSS !important
CSS Math Functions

CSS Navigation_Bar

CSS Navigation Bar: 스타일링하고 반응형으로 만드는 방법

  • *네비게이션 바(Navigation Bar)**는 웹사이트에서 주요 메뉴를 나타내는 핵심적인 UI 요소입니다. CSS를 사용해 네비게이션 바를 스타일링하고, 사용자 경험을 개선하며, 반응형 디자인을 통해 모바일 기기에서도 최적화된 네비게이션 바를 구현할 수 있습니다.

1. 기본 네비게이션 바 만들기

기본적인 네비게이션 바는 목록(ul과 li)을 사용해 각 메뉴 항목을 나타냅니다. 각 항목은 링크로 설정되며, CSS를 사용해 수평 정렬 및 스타일링을 적용합니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

위 코드에서는 ul 태그를 사용하여 네비게이션 항목을 목록으로 나열하고, 각 메뉴 항목은 링크(a)로 연결됩니다.

CSS 스타일링:

/* 기본적인 네비게이션 바 스타일 */
.navbar {
    background-color: #333; /* 배경색 */
    padding: 10px;
}

.nav-list {
    list-style-type: none; /* 목록의 기본 스타일 제거 */
    margin: 0;
    padding: 0;
    display: flex; /* 수평 정렬 */
}

.nav-item {
    margin-right: 20px;
}

.nav-item a {
    color: white; /* 텍스트 색상 */
    text-decoration: none; /* 밑줄 제거 */
    padding: 10px 15px;
    display: block; /* 링크를 블록 요소로 */
}

.nav-item a:hover {
    background-color: #575757; /* 호버 시 배경색 변경 */
}

이 코드는 수평 네비게이션 바를 구현한 예시입니다. **flexbox**를 사용해 목록 항목들을 수평으로 배치하며, 링크에 호버 효과를 추가하여 사용자 상호작용 시 배경색이 변하는 효과를 줍니다.

2. 반응형 네비게이션 바 만들기

반응형 네비게이션 바는 화면 크기에 따라 메뉴가 변경되거나 토글되는 방식입니다. 모바일 기기에서는 메뉴가 숨겨져 있다가 햄버거 메뉴를 통해 토글할 수 있도록 구현할 수 있습니다.

HTML 구조:

<nav class="navbar">
    <div class="logo">MySite</div>
    <div class="menu-toggle" id="mobile-menu">☰</div>
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

여기서 햄버거 메뉴(menu-toggle)를 추가하여, 모바일 환경에서 메뉴를 토글할 수 있도록 설정합니다.

CSS 스타일링:

/* 네비게이션 바의 기본 스타일 */
.navbar {
    background-color: #333;
    padding: 10px;
    position: relative;
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

.nav-item {
    margin-right: 20px;
}

.nav-item a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* 반응형 스타일링 */
@media (max-width: 768px) {
    .nav-list {
        display: none; /* 모바일에서는 기본적으로 메뉴 숨김 */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
    }

    .nav-list.active {
        display: flex; /* 토글되면 메뉴 보임 */
    }

    .nav-item {
        text-align: center;
        margin: 0;
    }

    .menu-toggle {
        display: block; /* 모바일에서 햄버거 메뉴 보임 */
        position: absolute;
        top: 15px;
        right: 20px;
    }
}

위 코드는 데스크톱 화면에서는 기본 네비게이션 바가 보이고, 모바일 화면에서는 햄버거 메뉴를 통해 네비게이션 바를 토글할 수 있는 반응형 디자인을 구현한 것입니다.

3. 햄버거 메뉴에 자바스크립트 추가

모바일 환경에서 햄버거 메뉴가 클릭되면 메뉴가 표시되도록 자바스크립트를 추가할 수 있습니다. CSS로만 숨기고 표시하는 것이 아니라, 자바스크립트로 메뉴 상태를 토글하는 방법입니다.

자바스크립트 코드:

const menuToggle = document.getElementById('mobile-menu');
const navList = document.querySelector('.nav-list');

menuToggle.addEventListener('click', function() {
    navList.classList.toggle('active'); /* active 클래스 토글 */
});

위 코드는 햄버거 메뉴를 클릭할 때마다 네비게이션 바에 active 클래스를 추가하거나 제거하여, 메뉴가 표시되도록 처리합니다.

4. 드롭다운 메뉴 구현

네비게이션 바에 드롭다운 메뉴를 추가하여 서브 메뉴를 만들 수 있습니다. 서브 메뉴는 호버하거나 클릭했을 때 표시되도록 구현할 수 있습니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item dropdown">
            <a href="#">Services</a>
            <ul class="dropdown-menu">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Marketing</a></li>
            </ul>
        </li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS 스타일링:

/* 기본 드롭다운 스타일 */
.nav-item {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    padding: 10px;
    list-style: none;
}

.dropdown-menu li {
    margin-bottom: 10px;
}

.dropdown-menu li a {
    color: white;
    text-decoration: none;
}

/* 드롭다운 메뉴 보이기 */
.nav-item:hover .dropdown-menu {
    display: block;
}

위 코드는 메뉴 항목에 마우스를 올렸을 때 드롭다운 메뉴가 표시되도록 설정합니다. **position: absolute**를 사용하여 서브 메뉴가 기본 메뉴 아래에 표시되며, 호버 상태에서만 보이게 설정되었습니다.

5. 반응형 드롭다운 메뉴

모바일 환경에서 드롭다운 메뉴는 클릭하거나 터치했을 때만 표시되도록 설정할 수 있습니다. 이를 위해 미디어 쿼리와 자바스크립트를 함께 사용해 드롭다운 메뉴가 모바일에 맞춰 동작하도록 구현할 수 있습니다.

자바스크립트 코드 추가:

const dropdown = document.querySelector('.dropdown');

dropdown.addEventListener('click', function(e) {
    e.preventDefault();
    this.querySelector('.dropdown-menu').classList.toggle('active');
});

CSS 수정:

@media (max-width: 768px) {
    .dropdown-menu {
        display: none; /* 모바일에서는 서브 메뉴 기본적으로 숨김 */
    }

    .dropdown-menu.active {
        display: block; /* 활성화되면 서브 메뉴 표시 */
    }

    .dropdown > a::after {
        content: " ▼"; /* 드롭다운 메뉴 표시용 화살표 추가 */
    }
}

위 코드는 모바일 화면에서 드롭다운 메뉴가 클릭 시에만 나타나도록 설정되었습니다. 또한, 메뉴 항목에 **화살표 아이콘(▼)**을 추가하여 드롭다운이 있음을 사용자에게 시각적으로 알림을 제공합니다.

6. 고급 네비게이션 바 스타일링: 고정된 네비게이션 바

  • *고정 네비게이션 바(Sticky Navigation Bar)**는 페이지를 스크롤하더라도 화면 상단에 고정된 상태로 남아, 사용자가 항상 메뉴에 접근할 수 있도록 합니다. 이를 통해 긴 페이지에서도 편리한 네비게이션을 제공할 수 있습니다.

HTML 구조:

<nav class="navbar fixed">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS 스타일링:

/* 고정된 네비게이션 바 */
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    z-index: 1000; /* 네비게이션 바가 다른 콘텐츠 위에 오도록 설정 */
    padding: 10px 0;
}

body {
    margin-top: 60px; /* 고정 네비게이션 바가 다른 콘텐츠와 겹치지 않도록 여백 추가 */
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

.nav-item {
    margin-right: 20px;
}

.nav-item a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.nav-item a:hover {
    background-color: #575757;
}

위 코드는 네비게이션 바를 스크롤해도 상단에 고정되도록 합니다. position: fixed 속성을 사용해 페이지 상단에 고정하고, 다른 콘텐츠와 겹치지 않도록 **body**에 여백을 추가했습니다.

7. 네비게이션 바의 활성화된 메뉴 항목 스타일링

활성화된 메뉴 항목을 표시하는 것은 현재 페이지가 어디인지 사용자에게 명확하게 알려주는 좋은 방법입니다. 이를 통해 페이지의 현재 위치를 시각적으로 강조할 수 있습니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#" class="active">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS 스타일링:

/* 활성화된 메뉴 항목 스타일 */
.nav-item a.active {
    background-color: #2196F3;
    color: white;
}

위 코드는 활성화된 메뉴 항목에 파란색 배경색을 적용하고, 텍스트 색상을 흰색으로 변경합니다. 사용자가 현재 어느 페이지에 있는지를 시각적으로 강조할 수 있습니다.

8. 네비게이션 바에 아이콘 추가

아이콘을 메뉴 항목에 추가하면 더 직관적이고 시각적으로 돋보이는 네비게이션 바를 만들 수 있습니다. Font Awesome이나 SVG 아이콘을 사용하여 메뉴 아이콘을 추가할 수 있습니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
        <li class="nav-item"><a href="#"><i class="fas fa-info"></i> About</a></li>
        <li class="nav-item"><a href="#"><i class="fas fa-cogs"></i> Services</a></li>
        <li class="nav-item"><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
    </ul>
</nav>

CSS 스타일링:

/* 네비게이션 바 아이콘 스타일 */
.nav-item i {
    margin-right: 8px;
    font-size: 1.2em;
}

위 코드는 Font Awesome 아이콘을 메뉴 항목에 추가한 예시입니다. 아이콘은 텍스트 앞에 위치하며, CSS로 아이콘과 텍스트 사이의 간격을 조정할 수 있습니다.

CSS 네비게이션 바는 웹사이트에서 중요한 사용자 인터페이스 요소입니다. CSS와 자바스크립트를 사용해 수평 정렬, 반응형 메뉴, 드롭다운 메뉴, 고정 네비게이션 바, 그리고 아이콘 추가 같은 다양한 스타일링과 기능성을 구현할 수 있습니다. 반응형 디자인을 적용하여 모바일 장치에서도 최적화된 사용자 경험을 제공하는 것이 중요합니다.

고정 네비게이션 바와 활성화된 메뉴 항목 강조 등의 기능을 통해 네비게이션의 편리함을 높이고, 드롭다운 메뉴를 활용해 복잡한 메뉴 구조를 깔끔하게 표시할 수 있습니다. 햄버거 메뉴와 아이콘을 추가하여 더 직관적이고 현대적인 네비게이션 바를 구현할 수 있습니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com