본문으로 건너뛰기
웹 프로젝트 기초집LESSON 11

메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기

난이도초급
예상 시간45분
선수지식10강 데이터 기반 DOM 카드

11강. 메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기

1. 이번 강의에서 해결할 문제​

작은 화면에서 메뉴가 공간을 차지하거나 CSS로만 숨겨 키보드 초점이 보이지 않는 곳에 남습니다. 실제 버튼과 hidden 상태를 연결합니다.

2. 학습 목표​

3. 핵심 개념​

메뉴를 여는 요소는 button이고 aria-controls가 대상 id를 가리킵니다. 표시 상태와 aria-expanded를 한 함수에서 동기화합니다. 기본 앵커 이동을 보존하면 JavaScript가 꺼져도 링크가 작동합니다.

4. 단계별 실습​

HTML · 헤더 내비게이션 교체

game-dev-portfolio/index.html
<button id="menuButton" class="menu-button" type="button" aria-expanded="false" aria-controls="siteNav">메뉴 열기</button>
<nav id="siteNav" aria-label="주요 메뉴" hidden>
  <a href="#about">소개</a><a href="#projects">프로젝트</a><a href="#contact">연락처</a>
</nav>

JavaScript · 파일 경로: js/app.js에 추가

game-dev-portfolio/js/app.js
const menuButton = document.querySelector('#menuButton');
const siteNav = document.querySelector('#siteNav');

function setMenuOpen(open) {
  menuButton.setAttribute('aria-expanded', String(open));
  menuButton.textContent = open ? '메뉴 닫기' : '메뉴 열기';
  siteNav.hidden = !open;
}

menuButton.addEventListener('click', () => {
  setMenuOpen(menuButton.getAttribute('aria-expanded') !== 'true');
});

siteNav.addEventListener('click', (event) => {
  if (event.target.matches('a[href^="#"]')) setMenuOpen(false);
});

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css
[hidden] { display: none !important; }
.menu-button { min-height: 44px; }
@media (min-width: 48rem) {
  .menu-button { display: none; }
  #siteNav { display: flex !important; }
}

개발자 도구 확인: 320px에서 Elements의 hidden, aria-expanded가 함께 변하는지 봅니다. JavaScript를 비활성화하면 메뉴 링크가 HTML에 남도록 개선할 방법도 기록합니다.

5. 코드가 동작하는 이유​

버튼의 기본 키보드 처리가 Enter와 Space를 지원합니다. hidden은 렌더링과 접근성 트리에서 메뉴를 함께 제거하고, 앵커 링크는 브라우저 기본 섹션 이동을 사용합니다.

6. 자주 하는 실수와 해결법​

7. 직접 실습​

8. 이해 점검 질문 3개​

9. 핵심 요약​

MINI QUIZ

메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기” 실습 결과를 해석하는 올바른 기준은 무엇인가요?
  2. 문제 2‘시각적으로만 메뉴를 이동’ 실수를 판단할 때 “메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기” 강의가 제시한 기준은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

11강. 메뉴와 스크롤: 접근 가능한 내비게이션과 섹션 이동 만들기 미완료 상태