반응형 레이아웃 & 햄버거 메뉴

화면 크기에 따라 레이아웃이 바뀌고, 좁은 화면에서는 메뉴가 햄버거 버튼 안으로 들어갑니다. 두 기능은 같은 768px 기준을 공유하기 때문에 함께 봐야 이해가 쉽습니다.

반응형 레이아웃

responsive.css는 @media (max-width: 768px), @media (max-width: 1024px) 형태의 max-width 쿼리로 작성되어 있습니다. 이는 큰 화면 스타일을 기본값으로 두고 화면이 좁아질 때 규칙을 덮어쓰는 방식이라, 실제로는 데스크톱 퍼스트 + 모바일 오버라이드 구조입니다.

README 체크리스트에는 "모바일 퍼스트"라고 적혀 있지만, 코드만 보면 반대 방향으로 짜여 있다는 점은 알아두는 게 좋습니다. (자기소개서나 코드 리뷰에서 "모바일 퍼스트"라고 말하면 코드와 어긋나므로, 방식을 바꾸거나 설명을 맞추는 것을 추천합니다.)

햄버거 메뉴

.menu-toggle 버튼 클릭 시 setMenuState(!state.isMenuOpen)이 호출되어 state.isMenuOpen 값이 토글되고, 그 값에 따라 .nav-links에 is-open 클래스가 붙거나 빠집니다. 동시에 aria-expanded, aria-label도 열림/닫힘 상태에 맞게 갱신됩니다.

메뉴 안의 링크를 클릭하면 이벤트 위임(selectors.menu.addEventListener('click', ...))으로 감지해 메뉴를 자동으로 닫습니다. 이벤트 위임은 이벤트 처리 글에서 자세히 다룹니다.

정리

• 반응형은 max-width 쿼리로 작성된 데스크톱 퍼스트 구조
• 햄버거 메뉴는 state.isMenuOpen 값 하나로 열림/닫힘과 접근성 속성을 함께 관리

출처: Codyssey-B1/B1-1