HTML 및 CSS로 반응형 네비게이션 바 만들기

자동목차

HTML 및 CSS로 반응형 네비게이션 바 만들기

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

요구 사항

• 메뉴 구성: Home, About, Services, Contact
• 반응형 디자인: 화면이 작아지면 메뉴가 햄버거 버튼으로 축소
• 아이콘 변경: 기존 폰트어썸 대신 Heroicons을 사용해 새로운 스타일 적용
• CSS 커스텀 속성 활용: 색상과 스타일을 쉽게 변경할 수 있도록 구성

1. HTML 구조 설정

네비게이션 바의 기본 HTML 구조를 작성합니다. 이 구조를 사용해 반응형 메뉴를 구현할 수 있습니다.

<nav class="navbar">
    <div class="navbar-logo">
        <a href="#">MySite</a>
    </div>
    <ul class="navbar-menu">
        <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>
    <div class="navbar-toggle">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </div>
</nav>

 

구조를 적용 했을때 나타나는 네비게이션 바인데 이제 css로 디자인을 해줍니다.

로고, 메뉴, 햄버거 버튼으로 구성됩니다.

2. CSS 스타일

다음으로 네비게이션 바의 스타일을 설정합니다. 이 코드는 반응형 디자인을 지원하도록 설계되었습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #004466;
    padding: 15px 30px;
}
.navbar-logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}
.navbar-menu {
    display: flex;
    list-style: none;
}
.navbar-menu li {
    margin-left: 20px;
}
.navbar-menu a {
    color: #f0f4f5;
    text-decoration: none;
}
.navbar-menu a:hover {
    color: #00cc99;
}
.navbar-toggle {
    display: none;
    cursor: pointer;
}
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #004466;
        width: 200px;
        text-align: right;
        padding: 20px;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-menu.active {
        display: flex;
    }
}

 

반응형 스타일을 위해 화면 크기가 768px 이하일 경우 메뉴가 숨겨지고, 햄버거 버튼이 나타나도록 했습니다.

3. JavaScript 기능

햄버거 버튼을 클릭했을 때 메뉴를 열고 닫을 수 있도록 JavaScript를 추가합니다.

const toggleBtn = document.querySelector('.navbar-toggle');
const menu = document.querySelector('.navbar-menu');
toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
});

 

위의 JavaScript 코드는 햄버거 메뉴 버튼을 클릭할 때 `.active` 클래스를 토글 하여 메뉴를 표시하거나 숨깁니다.

4. 커스텀 CSS 변수 활용

CSS 변수를 사용해 색상과 스타일을 쉽게 변경할 수 있도록 설정합니다.

:root {
    --bg-color: #004466;
    --text-color: #f0f4f5;
    --accent-color: #00cc99;
}
.navbar {
    background-color: var(--bg-color);
}
.navbar-menu a {
    color: var(--text-color);
}
.navbar-menu a:hover {
    color: var(--accent-color);
}

 

위와 같이 CSS 변수를 사용하면 디자인 변경 시 변수만 수정하여 쉽게 스타일을 조정할 수 있습니다.

결과물

이제 브라우저에서 HTML 파일을 열어 보세요. 화면 크기에 따라 반응형 메뉴가 작동하며, 햄버거 버튼을 클릭하면 메뉴가 열리고 닫힙니다.

마무리

이제 여러분도 완전히 새롭게 설계한 반응형 네비게이션 바를 활용해 다양한 웹 프로젝트에 적용해 보세요. 이번에는 기존 코드와 구조를 완전히 벗어나 독창적으로 설계했기 때문에 더욱 차별화된 결과물을 얻을 수 있을 거예요. 추가적으로 수정할 부분이나 질문이 있다면 언제든지 말씀해 주세요!