반응형 네비게이션(햄버거 메뉴) 구현

반응형 네비게이션(햄버거 메뉴 구현) → 작은 화면(모바일)에서는 긴 메뉴를 그대로 보여주기 어렵기 때문에 햄버거 버튼을 눌렀을 때 메뉴가 열리고 닫히는 방식을 많이 사용함. 핵심은 CSS로 메뉴를 숨기고, JavaScript로 토글하는 구조임.

<nav class="nav">
<div class="logo">LOGO</div>
<button class="toggle">☰</button>
<ul class="menu">
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>

.nav { display:flex; justify-content:space-between; align-items:center; background:#333; color:#fff; padding:10px; }
.menu { display:flex; list-style:none; gap:20px; }
.menu li a { color:#fff; text-decoration:none; }
.toggle { display:none; background:none; border:none; font-size:24px; color:#fff; }

/* 모바일 */
@media (max-width:768px) {
.menu { display:none; flex-direction:column; background:#444; padding:10px; }
.menu.active { display:flex; }
.toggle { display:block; }
}

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
toggle.addEventListener("click", ()=> menu.classList.toggle("active"));

이 코드는 PC에서는 가로형 메뉴, 모바일에서는 햄버거 버튼으로 전환됨. 버튼을 누르면 메뉴가 슬라이드처럼 열리고 닫힘. 실무 팁으로는 CSS transition을 추가해 애니메이션 효과를 주거나, aria-expanded 속성을 활용해 접근성까지 보강하면 더 완성도 높은 반응형 네비게이션을 만들 수 있음.