Guidelines
Practice
햄버거 메뉴란?
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>
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help