[CSS] 반응형 메뉴 바 만들기

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

반응형 메뉴 바는 웹 페이지의 다양한 화면 크기에 적응하여 사용자 경험을 향상시키는 중요한 요소입니다. 반응형 디자인을 통해 사용자는 데스크탑, 태블릿, 스마트폰 등 어떤 디바이스에서도 최적화된 인터페이스를 사용할 수 있습니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 반응형 메뉴 바를 만드는 방법을 설명합니다.


HTML 기본 구조

기본 HTML 구조는 웹 페이지의 머리글과 본문을 정의합니다. 메뉴 바와 관련된 요소들이 header 태그 내에 배치되어 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" crossorigin="anonymous">
</head>
<body>
    <header>
        <div class="nav-bar">
            <span class="logo"><a href="#">Brand Name</a></span>
            <nav class="menu">
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="tool-box">
                <div class="dark-light">
                    <i class="fa-solid fa-moon"></i>
                    <i class="fa-solid fa-sun"></i>
                </div>
                <div class="searchBox">
                    <div class="searchToggle">
                        <i class="fa-solid fa-xmark cancel"></i>
                        <i class="fa-solid fa-magnifying-glass search"></i>
                    </div>
                    <div class="search-field">
                        <input type="text" placeholder="Search...">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                </div>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>
    <script src="script.js"></script>
</body>
</html>


CSS 스타일링

style.css 파일에서 메뉴 바의 스타일을 정의합니다. 주요 스타일은 다음과 같습니다:

/* style.css */

/* 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* 색상 변수 설정 */
:root {
    --header-bg: #FFFFFF;
    --header-color: #202124;
    --border-color: #E5E5E5;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

header {
    height: 59px;
    width: 100%;
    background-color: var(--header-bg);
    border-bottom: 0.1px solid var(--border-color);
}

header .nav-bar {
    height: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .nav-bar .logo a {
    font-size: 25px;
    font-weight: 500;
    color: var(--header-color);
    text-decoration: none;
}

.nav-bar .menu .nav-links {
    display: flex;
    align-items: center;
}

.nav-bar .menu .nav-links li {
    margin: 0 5px;
    list-style: none;
}

.nav-bar .menu .nav-links li a {
    font-size: 15px;
    font-weight: 400;
    color: var(--header-color);
    text-decoration: none;
    padding: 10px;
}

.tool-box .dark-light {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

.dark-light i {
    position: absolute;
    color: var(--header-color);
    font-size: 22px;
    cursor: pointer;
}

.dark-light i.fa-sun {
    opacity: 0;
    pointer-events: none;
}

.searchBox {
    position: relative;
}

.searchToggle {
    display: flex;
}

.search-field {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--header-bg);
    padding: 10px;
    border: 1px solid var(--border-color);
}

.search-field input {
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* 햄버거 메뉴 스타일 */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: var(--header-color);
    margin: 4px 0;
    transition: 0.4s;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: var(--header-bg);
    }
    
    .nav-links li {
        margin: 10px 0;
    }

    .hamburger {
        display: flex;
    }
}

.nav-links.active {
    display: flex;
}


JavaScript로 메뉴 토글 기능 추가

JavaScript를 사용하여 메뉴 토글 기능을 추가합니다. 햄버거 메뉴 아이콘을 클릭하면 네비게이션 링크가 표시되도록 합니다. 또한, 검색 버튼을 클릭하면 검색 필드가 표시되도록 합니다.

// script.js
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const searchToggle = document.querySelector('.searchToggle');
const searchField = document.querySelector('.search-field');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

searchToggle.addEventListener('click', () => {
    searchField.classList.toggle('active');
});


요약

위 단계를 통해 HTML, CSS, JavaScript를 활용한 반응형 메뉴 바를 완성했습니다. 이 메뉴 바는 다양한 화면 크기에 적응하며, 모바일 디바이스에서는 햄버거 메뉴 아이콘을 통해 네비게이션 링크를 표시합니다. 이를 통해 사용자는 데스크탑, 태블릿, 스마트폰 등 다양한 디바이스에서 일관된 사용자 경험을 제공받을 수 있습니다.

인기글

CSS 리스트