HTML-L4-013 / 복합 위젯 초기 구조
모달 제목 설명 연결
고급문제
dialog에 aria-labelledby=dialog-title, aria-describedby=dialog-desc를 연결하세요. 제목은 h2 "학습 초기화", 설명은 p "저장된 풀이를 지웁니다."입니다. 닫기 button의 type은 button입니다.
예시 텍스트·ID·참조 관계를 유지하면서 의미에 맞는 HTML을 작성하세요.
확인할 조건
- 대화상자 이름
- 대화상자 설명
- 제목 대상
- 버튼 타입
힌트
이름과 설명은 실제 문서 요소를 참조해야 합니다.
해설·정답 보기
모달 열기·닫기와 포커스 복원은 동작 구현의 별도 책임입니다. 이 문제는 그 동작의 기반이 되는 마크업 계약입니다.
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <main><dialog aria-labelledby="dialog-title" aria-describedby="dialog-desc"><h2 id="dialog-title">학습 초기화</h2><p id="dialog-desc">저장된 풀이를 지웁니다.</p><button type="button">닫기</button></dialog></main> </body> </html>
index.html화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.