햄버거 메뉴란?

1. 모양: 세 개의 수평선으로 이루어진 햄버거 모양의 아이콘을 활용해, 주 메뉴 항목을 숨기거나 나타냅니다.

2. 목적:

• 햄버거 메뉴는 화면에 표시되는 콘텐츠를 최소화하고 깔끔하게 보이기 위해 사용합니다.
• 주로 모바일 화면에 사용되며, 좁은 화면 공간 때문에 주 메뉴를 숨기고 필요할 때만 보이게 하는 데 유용합니다.

3. 장점:

• 간결하고 깔끔한 디자인
• 사용자가 이미 익숙하여 쉽게 인식

4. 단점:

• 처음 방문할 때 메뉴 항목들을 바로 볼 수 없어 혼란을 느낄 수 있음
• 과도하게 사용될 경우 사용자 경험(UX)에 방해가 될 수 있음

5. 실습 템플릿 HTML 코드:

복사
<!-- 햄버거 메뉴 -->
<ul class="nav-menu">
  <li><a class="nav-link" href="#about">소개</a></li>
  <li><a class="nav-link" href="#interests">취미</a></li>
  <li><a class="nav-link" href="#memory">추억</a></li>
  <li>
    <a class="nav-link btn btn-primary" href="#contact"
      >연락하기 <i class="fas fa-arrow-right"></i
    ></a>
  </li>
</ul>
<!-- 햄버거 아이콘 -->
<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

<!-- 스타일 -->
<style>
  .hamburger-menu {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .hamburger-menu .line {
    width: 100%;
    height: 3px;
    background-color: black;
  }
</style>