5.6 햄버거 메뉴

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.6 햄버거 메뉴

햄버거 메뉴는 반응형 웹 디자인에서 많이 사용되는 네비게이션 방식으로, 공간을 효율적으로 활용할 수 있도록 도와줍니다. 햄버거 메뉴는 일반적으로 작은 화면에서는 메뉴 항목을 숨기고, 버튼 클릭 시 전체 메뉴를 표시하는 방식으로 작동합니다. 이러한 접근 방식은 사용자가 화면의 크기에 관계없이 쉽게 탐색할 수 있도록 합니다.

햄버거 메뉴를 구현하기 위해서는 HTML, CSS, JavaScript를 함께 사용해야 합니다. 아래의 예제를 통해 햄버거 메뉴의 기본 구조를 이해하고, 이를 바탕으로 실습을 진행하겠습니다.

코드 html

<!-- HTML 구조 -->
<nav class="navbar">
    <div class="logo">로고</div>
    <div class="hamburger" id="hamburger">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <ul class="menu" id="menu">
        <li><a href="#">홈</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">연락처</a></li>
    </ul>
</nav>

코드 css

/* CSS 스타일 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #333;
    color: white;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    height: 3px;
    width: 25px;
    background: white;
    margin: 3px 0;
}

.menu {
    list-style-type: none;
    display: flex;
}

.menu li {
    margin: 0 1rem;
}

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

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        background: #333;
        top: 60px;
        right: 0;
    }
    .menu.active {
        display: flex;
    }
}

코드 javascript

// JavaScript로 햄버거 메뉴 토글 기능 구현
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');

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

위의 코드를 통해 햄버거 메뉴를 구현할 수 있습니다. HTML에서 네비게이션 바를 만들고, CSS로 스타일을 지정한 후, JavaScript로 메뉴의 보이기/숨기기를 토글하는 기능을 추가했습니다.

실습 과제

제공된 코드를 기반으로 햄버거 메뉴의 스타일을 수정하여 디자인을 변경해보세요.
메뉴 항목을 추가하여 더 많은 링크를 제공해보세요.
다양한 화면 크기에서 메뉴의 동작을 확인하고, 필요시 CSS Media Query를 추가로 수정해보세요.

햄버거 메뉴는 반응형 웹 디자인에서 매우 유용한 도구입니다. 실습을 통해 의도한 대로 메뉴가 잘 작동하는지 확인하며, 본인의 스타일로 꾸며보세요.

5.6 햄버거 메뉴

5.6 햄버거 메뉴

실습 과제

댓글 0