HTML-L3-021 / 상태와 의미
aria-expanded 초기 상태
중급문제
접힌 메뉴의 초기 마크업을 만드세요. button은 aria-expanded=false, aria-controls=menu를 가지며 메뉴 영역 id=menu는 hidden이어야 합니다.
예시 텍스트·ID·참조 관계를 유지하면서 의미에 맞는 HTML을 작성하세요.
확인할 조건
- 접힘 표시
- 대상 연결
- 실제 숨김
힌트
표시된 접근성 상태와 실제 노출 상태를 일치시키세요.
해설·정답 보기
이 문제는 초기 상태를 다룹니다. 클릭에 따른 상태 동기화는 별도 JavaScript가 필요합니다.
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <main><button type="button" aria-expanded="false" aria-controls="menu">메뉴</button><nav id="menu" hidden><a href="#main">본문</a></nav></main> </body> </html>
index.html화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.