방송대 HTML5웹프로그래밍 3강: 미디어 제공과 시맨틱 문서 구조

방송대 HTML5웹프로그래밍 3강: 미디어 제공과 시맨틱 문서 구조

영상이 재생된다는 것과 사용자가 내용을 이해할 수 있다는 것은 같은 일이 아닙니다. 화면이 보기 좋다는 것과 문서의 역할이 분명하다는 것도 다릅니다. 이 글은 미디어 파일이 선택되고 보조 정보가 연결되는 과정, 그리고 페이지의 영역·상태·상호작용을 의미 있는 요소로 조직하는 기준을 하나의 구조로 연결합니다.

브라우저에 맡길 일과 작성자가 밝혀야 할 일을 나눈다

HTML5의 미디어 요소와 시맨틱 요소는 겉으로는 다른 주제처럼 보이지만 공통 질문을 가집니다. 브라우저가 처리할 수 있는 정보는 기계가 읽을 수 있게 표시하고, 사용자가 선택하거나 이해해야 할 정보는 조작 장치·텍스트·문서 구조로 드러내야 합니다.

설계 대상	브라우저가 알아야 할 것	사용자가 확인할 것	핵심 요소
미디어 재생	파일 위치, 형식, 로딩 방식	재생·정지·음량과 대체 정보	audio, video, source, track
문서 구조	주요 내용과 구역의 역할	현재 위치와 정보의 관계	main, article, section, nav, aside
상태·상호작용	값의 의미, 열림 상태, 모달 여부	진행 상황과 가능한 행동	meter, progress, details, dialog

따라서 요소를 외울 때는 모양을 기준으로 묶기보다 자원 제공, 문서 역할, 상태와 행동 중 무엇을 표현하는지 먼저 분류하는 편이 정확합니다.

미디어는 파일 하나가 아니라 재생 경로로 설계한다

audio와 video는 재생 영역을 만들고, source는 여러 형식의 후보를 제공합니다. 브라우저는 나열된 후보를 앞에서부터 살펴보고 재생할 수 있는 형식을 선택합니다. type을 쓰면 파일 전체를 내려받기 전에 형식 지원 여부를 판단하는 데 도움이 됩니다.

다음은 강의 내용을 바탕으로 직접 구성한 오디오 예입니다. 단일 파일만 쓴다면 audio의 src로 지정할 수 있지만, 호환성을 위한 대체 파일이 있다면 자식 source로 분리합니다.

<audio controls preload="metadata">
  <source src="lecture.mp3" type="audio/mpeg">
  <source src="lecture.ogg" type="audio/ogg">
  오디오를 재생할 수 없습니다.
  <a href="lecture.mp3">오디오 파일 다운로드</a>
</audio>

controls는 사용자가 재생을 통제하게 합니다. preload="metadata"는 재생 전부터 전체 파일을 받기보다 재생 시간 같은 메타데이터를 먼저 준비하는 선택입니다. none은 미리 받지 않고, auto는 브라우저가 적극적으로 미리 받을 수 있게 합니다.

판단 핵심: 파일이 열리는지만 시험하지 말고, 첫 형식을 재생하지 못할 때 다음 후보와 다운로드 링크까지 이어지는지 확인합니다.

자동 재생보다 사용자 통제와 문맥을 먼저 설계한다

autoplay를 적어도 브라우저 정책 때문에 사용자 조작 없는 소리 재생이 차단될 수 있습니다. 자동 재생이 꼭 필요한 상황에서는 보통 muted를 함께 고려하지만, 그 조합도 재생을 절대 보장하는 명령은 아닙니다. loop 역시 반복 목적이 명확할 때만 사용해야 합니다.

비디오는 오디오와 같은 기본 속성에 더해 시작 전 문맥을 보여 주는 poster, 모바일에서 문서 안 재생을 유도하는 playsinline을 사용할 수 있습니다. 고정된 width와 height만으로 반응형 화면을 해결하려 하지 말고 표시 크기는 CSS의 역할로 분리합니다.

<video controls preload="metadata"
       poster="preview.jpg" playsinline>
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  동영상을 재생할 수 없습니다.
</video>

흔한 오개념: autoplay는 “재생을 요청하는 속성”이지 “재생 성공을 보증하는 속성”이 아닙니다. 사용자의 설정과 브라우저 정책이 최종 동작에 영향을 줍니다.

특정 구간과 시간 기반 텍스트는 신뢰 수준이 다르다

미디어 URL 뒤의 #t=시작,종료는 재생할 구간을 제안합니다. 예를 들어 lesson.mp4#t=20,40은 20초부터 40초까지를 뜻하고, #t=,30은 처음부터 30초까지, #t=30은 30초부터를 뜻합니다. 다만 서버·브라우저·미디어 컨테이너에 따라 동작 편차가 있으므로 강의에서는 데모·참고 용도로 제한하고, 정밀한 제어에는 JavaScript의 currentTime 같은 API를 대안으로 제시합니다.

track은 비디오의 시간축에 외부 텍스트를 연결합니다. subtitles는 주로 대사를 번역한 자막, captions는 대사와 음악·효과음까지 전달하는 캡션, descriptions는 화면의 시각 정보를 설명하는 트랙입니다.

<video controls>
  <source src="interview.mp4" type="video/mp4">
  <track src="subtitles-ko.vtt" kind="subtitles"
         srclang="ko" label="한국어" default>
  <track src="captions-en.vtt" kind="captions"
         srclang="en" label="English (CC)">
</video>

src는 VTT 파일, kind는 트랙의 역할, srclang은 언어, label은 사용자가 고르는 이름입니다. 자동 활성화할 default 트랙은 하나만 둡니다.

WebVTT는 시간 범위와 표시 문장을 짝짓는다

WebVTT 파일은 첫 줄의 WEBVTT와 큐(cue)들의 모음입니다. 각 큐는 HH:MM:SS.sss --> HH:MM:SS.sss 형식의 시작·종료 시간 뒤에 그 구간에서 표시할 텍스트를 둡니다.

WEBVTT

00:00:02.000 --> 00:00:05.000
오늘의 핵심 개념을 시작합니다.

00:00:07.000 --> 00:00:11.500
[잔잔한 음악] 화면에 구조 예제가 나타납니다.

학습용 두 번째 큐는 효과음도 적었으므로 단순 번역 자막보다는 캡션의 역할에 가깝습니다. 시간 구간이 겹치면 동시에 표시될 가능성이 생기므로, 작성 후에는 실제 재생 화면에서 시작·종료 시점과 가독성을 확인해야 합니다.

시맨틱 구조는 위치가 아니라 역할의 관계망이다

시맨틱 요소는 “이 부분이 어떤 역할을 하는가”를 이름으로 전달합니다. 이것은 화면 모양을 자동으로 바꾸기보다 접근성 도구, 검색 시스템, 협업 개발자가 구조를 해석할 단서를 제공합니다. 단순히 왼쪽에 있다고 aside, 화면 위쪽이라고 header가 되는 것은 아닙니다.

판단 질문	선택할 요소	주의할 경계
페이지의 핵심 콘텐츠인가?	main	일반적인 한 문서에서는 핵심 main을 하나로 명확히 한다
주요 탐색 링크 묶음인가?	nav	페이지의 모든 링크를 nav에 넣지 않는다
본문을 보조하는 정보인가?	aside	화면의 좌우 위치가 아니라 관계로 판단한다
주제와 제목이 있는 구역인가?	section	디자인만을 위한 묶음에는 div가 더 알맞다
떼어 공유해도 완결되는가?	article	단순한 한 단락과 구분한다
머리말·꼬리말 역할인가?	header, footer	페이지뿐 아니라 section·article 안에서도 반복 가능하다

header는 화면 본문의 머리말 영역이고, head는 문서 메타데이터 영역입니다. 이름이 비슷해도 계층과 목적이 다릅니다.

section·article·div는 독립성과 주제로 가른다

세 요소가 헷갈리면 다음 두 질문을 순서대로 사용합니다.

1. 이 부분만 떼어 링크하거나 배포해도 내용이 완결되는가? 그렇다면 article 후보입니다.
2. 하나의 주제를 제목과 함께 나눈 구역인가? 그렇다면 section 후보입니다.
3. 둘 다 아니고 배치나 스타일을 위한 묶음이라면 의미 없는 컨테이너인 div를 사용합니다.

긴 블로그 글 하나는 article이고 그 안의 서론·본론 같은 장은 section이 될 수 있습니다. 반대로 댓글 목록 전체는 하나의 section이며, 작성자와 내용을 가진 각 댓글은 독립적인 article이 될 수 있습니다. 포함 방향보다 각 조각의 역할이 판단 기준입니다.

판단 핵심: “section 안에는 article이 들어간다”처럼 외우지 말고, 바깥은 어떤 집합이고 안쪽 항목은 독립적으로 완결되는지 설명해 봅니다.

헤딩 계층이 문서 구조를 읽는 경로가 된다

section은 주제 단위이므로 보통 제목을 가집니다. 강의의 실무 규칙에 따르면 페이지 제목은 h1, 그 아래 주요 구역은 h2, 하위 항목은 h3처럼 논리적 계층을 순차적으로 구성합니다. 제목 크기를 정하려고 레벨을 고르는 것이 아닙니다.

<main>
  <article>
    <header>
      <h1>우리 동네 산책 기록</h1>
    </header>
    <section>
      <h2>강변 코스</h2>
      <p>코스의 특징을 설명합니다.</p>
    </section>
  </article>
</main>

중첩은 가능하지만 깊어질수록 관계를 추적하기 어려워집니다. 새 section을 만들기 전에 “새 제목이 필요한 별도 주제인가?”라고 묻는 것이 중첩 남용을 막습니다.

독립 자료·추가 설명·날짜는 각각 맞는 의미를 가진다

figure는 본문에서 독립적으로 참조할 수 있는 이미지·코드·도표·인용문과 캡션의 관계를 나타냅니다. figcaption은 figure의 첫째 또는 마지막 자식으로 간단한 설명과 필요한 출처를 제공합니다. 캡션도 독립성도 없다면 장식처럼 무조건 감쌀 이유는 없습니다.

details와 그 자식 summary는 사용자가 펼치고 접을 수 있는 추가 정보를 만듭니다. summary는 행동 결과를 예상할 수 있는 명확한 문장으로 쓰고, 처음부터 펼쳐 두려면 open 속성을 사용합니다.

<details>
  <summary>제출 전에 확인할 항목 보기</summary>
  <p>파일 이름과 재생 가능한 형식을 확인합니다.</p>
</details>

<p>행사일: <time datetime="2026-12-25">12월 25일</time></p>

time의 화면 텍스트는 사람이 읽고, datetime의 표준화된 값은 기계가 날짜·시간을 정확히 해석하도록 돕습니다.

meter와 progress는 값보다 질문이 다르다

둘 다 막대처럼 보일 수 있지만 meter는 알려진 범위 안의 정적인 측정값, progress는 완료를 향해 진행 중인 작업 상태를 나타냅니다.

상황	판단	핵심 속성
512GB 중 256GB 사용	범위 안의 측정값이므로 meter	min, max, value, low, high, optimum
파일 다운로드 70% 완료	완료를 향한 진행률이므로 progress	value, max
서버 응답을 기다리지만 남은 양을 모름	불확정 진행 상태의 progress	value를 생략

<label for="disk-usage">디스크 사용량:</label>
<meter id="disk-usage" min="0" max="512" value="256"
       aria-valuetext="총 512GB 중 256GB 사용">256GB</meter>

<label for="download">파일 다운로드:</label>
<progress id="download" value="70" max="100">70%</progress>

막대의 색과 길이만으로 의미를 전달하지 말고 레이블과 읽을 수 있는 텍스트를 함께 제공합니다. 실제 진행률이 변한다면 JavaScript가 value를 지속적으로 갱신해야 하며, 완료 시점을 모르면 progress의 value를 제거합니다.

ruby와 wbr은 짧지만 정밀한 읽기 단서를 제공한다

ruby는 베이스 문자와 발음·주석을 묶고, rt는 작게 표시할 주석 텍스트를 담습니다. 일본어 독음, 중국어 병음, 한자 독음처럼 문자 자체만으로 발음을 알기 어려울 때 유용합니다.

wbr은 줄바꿈을 강제하지 않고 “공간이 부족하면 여기에서 나눌 수 있다”는 기회를 제공합니다. 따라서 br은 확정 줄바꿈, wbr은 조건부 줄바꿈입니다. 긴 URL·파일 경로·붙어 있는 단어에서 의미가 끊기지 않는 지점에만 둡니다.

<ruby>大<rt>대</rt>韓<rt>한</rt>民<rt>민</rt>國<rt>국</rt></ruby>

<p>https://example.com<wbr>/courses<wbr>/html5-media</p>

오류 교정: wbr은 보이지 않는 위치 제안이므로 색이나 크기를 꾸미는 대상이 아닙니다. 화면 폭이 충분할 때 아무 변화가 없는 것이 정상입니다.

dialog는 모달 여부와 닫힌 결과까지 설계한다

dialog는 브라우저가 최상위 레이어, 포커스 이동, ESC 닫기 같은 동작을 지원하는 대화상자입니다. showModal()은 배경 상호작용을 막고 ::backdrop이 생기는 모달 방식이며, show()는 배경을 계속 조작할 수 있는 비모달 방식입니다.

form method="dialog" 안의 버튼을 누르면 대화상자가 닫히고, 선택한 버튼의 value를 returnValue로 확인할 수 있습니다. 강의의 파일 삭제 상황을 축약하면 다음 흐름입니다.

<button id="openBtn">파일 삭제</button>
<dialog id="deleteDialog">
  <h2>파일 삭제</h2>
  <p>정말로 삭제하시겠습니까?</p>
  <form method="dialog">
    <button value="cancel">취소</button>
    <button value="confirm" autofocus>삭제</button>
  </form>
</dialog>

const dialog = document.getElementById('deleteDialog');
const openBtn = document.getElementById('openBtn');

openBtn.addEventListener('click', () => dialog.showModal());

dialog.addEventListener('close', () => {
  if (dialog.returnValue === 'confirm') {
    console.log('삭제 선택');
  } else {
    console.log('취소 또는 닫기');
  }
});

핵심은 팝업 모양이 아니라 사용자에게 확인할 질문을 제시하고, 모달인지 비모달인지 정하며, 닫힌 뒤 선택 결과를 처리하는 전체 순서입니다.

요소 선택은 자원·역할·상태의 세 단계로 점검한다

1. 자원을 제공하는가? 미디어라면 재생 요소, 대체 source, 시간 기반 track, 실패 시 텍스트·링크를 확인합니다.
2. 문서의 역할을 나누는가? 핵심·탐색·보조·주제·독립 콘텐츠를 구분하고, 단순 디자인 묶음은 div로 남깁니다.
3. 값이나 행동을 표현하는가? 측정값과 진행률, 펼침과 모달, 기계용 날짜 값처럼 사용자가 알아야 할 상태를 맞는 요소와 레이블로 드러냅니다.

직접 점검해 봅시다. “강의 영상 옆의 용어 설명, 45% 진행된 업로드, 긴 URL의 선택적 줄바꿈”은 각각 aside, progress, wbr입니다. 같은 화면에 있어도 선택 근거는 위치나 모양이 아니라 역할입니다.

핵심 개념 정리

• 미디어 경로: audio·video가 재생 문맥을 만들고 source가 형식 후보, track이 시간 기반 텍스트를 연결합니다.
• 문서 관계: main은 핵심, nav는 주요 탐색, aside는 보조, section은 제목 있는 주제, article은 독립 가능한 콘텐츠입니다.
• 의미 있는 보조 요소: figure·figcaption은 독립 자료와 캡션, details·summary는 펼침 정보, time은 사람용 표현과 기계용 날짜를 연결합니다.
• 값과 행동: meter는 범위 안의 측정값, progress는 진행 중인 작업, dialog는 모달·비모달 대화 흐름을 나타냅니다.
• 정밀한 읽기: ruby·rt는 발음 주석, wbr은 필요한 경우에만 허용하는 줄바꿈 위치입니다.

새 요소를 만났을 때 태그 이름부터 외우지 말고, 먼저 “무슨 자원을 어떻게 제공하는가, 문서 안에서 어떤 역할인가, 어떤 상태나 행동을 전달하는가”를 묻습니다. 그다음 실패했을 때의 대체 경로와 레이블, 계층을 확인하면 보이는 화면을 넘어 접근 가능하고 유지하기 쉬운 HTML 구조를 설계할 수 있습니다.

예상문제 10선

1. 여러 오디오 형식을 제공하는 코드에서 브라우저의 일반적인 선택 흐름으로 가장 알맞은 것은?

① 모든 source 파일을 끝까지 내려받은 뒤 가장 큰 파일을 재생한다 ② 앞에서부터 지원 가능한 형식을 판단하여 적합한 후보를 재생한다 ③ type 속성의 알파벳 순서로 후보를 다시 정렬해 재생한다 ④ 마지막 source만 유효하며 앞의 후보는 설명 텍스트로 취급한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②

• ① 오답: 후보를 모두 받을 필요 없이 형식 정보를 이용해 재생 가능성을 판단할 수 있습니다.
• ② 정답: source의 나열 순서가 후보 우선순위가 되므로 호환성과 용량을 고려해 앞쪽 후보를 정합니다.
• ③ 오답: 브라우저가 type 값을 알파벳순으로 재배열한다는 규칙은 없습니다.
• ④ 오답: 여러 source는 실제 대체 재생 후보이며 마지막 하나만 유효한 것이 아닙니다.

2. <video autoplay>를 작성한 뒤 “페이지가 열리면 소리까지 반드시 자동 재생된다”고 설명했다. 가장 적절한 교정은?

① loop를 추가하면 자동 재생 차단 정책을 우회할 수 있다 ② preload를 auto로 바꾸면 재생 허용과 파일 로딩이 동시에 보장된다 ③ controls를 제거하면 사용자 조작이 없어져 자동 재생이 확실해진다 ④ 자동 재생은 정책에 따라 차단될 수 있으며 필요하면 muted를 고려해 실제 환경에서 시험한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: loop는 재생 후 반복 여부를 정할 뿐 자동 재생 허용 조건을 바꾸지 않습니다.
• ② 오답: preload는 미리 불러올 범위를 다루며 사용자 조작 정책과 별개입니다.
• ③ 오답: controls 제거는 사용자 통제만 줄이고 자동 재생 성공을 보장하지 않습니다.
• ④ 정답: autoplay는 요청이며 브라우저 정책이 최종 동작을 제한할 수 있다는 경계를 반영합니다.

3. 대사뿐 아니라 문 닫히는 소리와 배경 음악도 텍스트로 전달하려 한다. 가장 알맞은 track의 kind는?

① captions ② subtitles ③ descriptions ④ metadata

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①

• ① 정답: captions는 대사 외의 음악과 효과음 같은 청각 정보까지 글로 전달하는 목적에 맞습니다.
• ② 오답: subtitles는 주로 대사를 다른 언어로 번역해 보여 주는 역할입니다.
• ③ 오답: descriptions는 화면에서 일어나는 시각적 내용을 설명하는 트랙입니다.
• ④ 오답: 이 강의에서 분류한 자막·캡션·화면해설 목적 중 효과음 전달에 해당하지 않습니다.

4. 하나의 블로그 글이 매우 길어 ‘도입’, ‘분석’, ‘결론’이라는 제목 있는 장으로 나뉜다. 가장 적절한 구조는?

① nav 하나 안에 세 article을 넣는다 ② aside 하나 안에 세 main을 넣는다 ③ 하나의 article 안에 제목을 가진 세 section을 둔다 ④ footer 하나 안에 제목 없는 div 세 개만 둔다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③

• ① 오답: nav는 주요 탐색 링크 묶음이지 글의 본문 장을 담는 바깥 구조가 아닙니다.
• ② 오답: aside는 보조 정보이며 main을 여러 개 배치하는 용도가 아닙니다.
• ③ 정답: 독립적으로 배포되는 글 전체는 article, 그 안의 주제별 장은 section으로 표현할 수 있습니다.
• ④ 오답: footer는 꼬리말이고, 제목 있는 논리적 장의 의미도 div만으로는 드러나지 않습니다.

5. 요소 선택에 관한 설명 중 역할에 따른 판단을 가장 잘 적용한 것은?

① 화면 오른쪽에 놓인 정보는 내용과 관계없이 aside로 정한다 ② 테두리가 필요한 묶음은 제목이 없어도 section으로 정한다 ③ 떼어 공유해도 완결되면 article, 제목 있는 주제 구역이면 section을 우선 검토한다 ④ 페이지의 모든 링크를 하나의 nav에 모아야 시맨틱 구조가 된다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③

• ① 오답: aside의 기준은 좌우 위치가 아니라 주 콘텐츠를 보조하는 관계입니다.
• ② 오답: 스타일을 위한 묶음은 div가 적합하며 section은 주제와 제목을 기준으로 판단합니다.
• ③ 정답: 독립 가능성과 주제 단위라는 두 질문이 article과 section을 가르는 핵심입니다.
• ④ 오답: nav는 주요 탐색 링크에 사용하며 모든 링크를 포함할 필요가 없습니다.

6. figure와 figcaption의 관계에 대한 설명으로 알맞은 것은?

① 독립적으로 참조할 자료와 그 캡션의 관계를 표현한다 ② 페이지의 주요 내비게이션과 링크 제목을 표현한다 ③ 완료율을 측정하고 기준 구간별 색을 결정한다 ④ 대화상자의 모달 여부와 반환값을 표현한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①

• ① 정답: 이미지·코드·도표처럼 독립적으로 참조할 자료와 설명 캡션을 의미 있게 묶습니다.
• ② 오답: 주요 내비게이션은 nav의 역할이며 figcaption은 탐색 제목이 아닙니다.
• ③ 오답: 범위 안의 측정값은 meter가 담당하며 figure의 목적과 다릅니다.
• ④ 오답: 모달과 반환값은 dialog의 동작에 관한 설명입니다.

7. 다음 세 상황을 순서대로 표현할 요소의 조합은? (가) 100점 만점의 만족도 82점, (나) 100MB 중 40MB 다운로드, (다) 남은 시간을 모르는 서버 연결

① progress, meter, meter ② meter, meter, progress value="0" ③ progress, progress, progress value="100" ④ meter, progress value="40", value 없는 progress

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: 만족도는 범위 안의 측정값이고 다운로드는 완료를 향한 작업이므로 앞의 두 요소가 뒤바뀌었습니다.
• ② 오답: 다운로드는 progress가 맞고, 불확정 상태를 value 0으로 쓰면 0%라는 확정값처럼 해석됩니다.
• ③ 오답: 만족도는 진행 작업이 아니며 value 100은 완료 상태이지 남은 시간을 모르는 상태가 아닙니다.
• ④ 정답: 정적 측정, 확정 진행률, 불확정 진행이라는 세 조건을 각각 맞게 구분했습니다.

8. br과 wbr의 차이를 가장 정확하게 설명한 것은?

① br은 긴 단어에서만, wbr은 문단 사이에서만 사용할 수 있다 ② br은 줄바꿈을 실행하고 wbr은 필요할 때 나눌 수 있는 위치를 제안한다 ③ br은 화면 폭에 따라 사라지고 wbr은 언제나 새 줄을 만든다 ④ 두 요소 모두 발음 주석을 글자 위에 표시한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②

• ① 오답: 두 요소의 차이는 사용 위치 제한이 아니라 줄바꿈의 강제 여부입니다.
• ② 정답: 공간이 충분하면 wbr에서는 줄이 나뉘지 않지만 br은 줄을 바꿉니다.
• ③ 오답: 실제 동작을 반대로 설명했습니다. 조건부인 쪽이 wbr입니다.
• ④ 오답: 발음 주석은 ruby와 rt가 담당합니다.

9. 배경 화면의 조작을 막고 사용자가 ‘취소’ 또는 ‘삭제’를 고르게 하는 확인창을 열려 한다. 가장 적절한 방법은?

① dialog에 show()를 호출하고 배경 클릭을 결과값으로 사용한다 ② details에 open을 지정하고 summary의 글자색으로 결과를 구분한다 ③ progress에 value를 제거하고 close 이벤트를 기다린다 ④ dialog에 showModal()을 호출하고 닫힌 뒤 returnValue를 확인한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: show()는 비모달 방식이어서 배경 상호작용 차단 요구와 맞지 않습니다.
• ② 오답: details는 추가 정보를 펼치는 요소이며 사용자의 확인 결과를 반환하는 모달이 아닙니다.
• ③ 오답: progress의 value 생략은 불확정 진행 상태를 뜻하고 대화상자와 관련이 없습니다.
• ④ 정답: showModal()로 배경을 잠그고 form method="dialog" 버튼의 값을 닫힘 뒤 판별할 수 있습니다.

10. 접근성과 의미를 함께 고려해 HTML을 검토하는 순서로 가장 적절한 것은?

① 화면 위치 결정 → 모든 영역을 div로 통일 → 마지막에 태그 이름 변경 ② 색상 선택 → 자동 재생 지정 → 사용자 대체 경로 제거 ③ 자원·역할·상태 파악 → 맞는 요소 선택 → 레이블·대체 경로·계층 확인 ④ 코드 길이 측정 → section 수 증가 → 모든 미디어에 같은 속성 부여

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③

• ① 오답: 위치와 div 통일은 영역의 의미를 먼저 판단하는 시맨틱 설계 순서를 거꾸로 만듭니다.
• ② 오답: 표현과 자동 재생을 앞세우고 사용자 통제와 실패 대비를 제거해 접근성을 낮춥니다.
• ③ 정답: 무엇을 전달하는지 분류한 뒤 요소를 고르고, 실제 사용자가 이해·조작할 수 있는 단서까지 점검합니다.
• ④ 오답: 요소 수나 코드 길이는 의미 적합성을 보장하지 않으며 미디어마다 목적과 조건이 다릅니다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료를 바탕으로 학습 목적에 맞게 재구성한 비공식 학습자료입니다. 강의 슬라이드의 배열을 옮기기보다 미디어 제공, 문서 역할, 상태·상호작용이라는 관계로 다시 조직하고 예제와 판단 절차를 검토했습니다.

• 작성·편집: 올에이클래스 학습연구팀
• 주요 근거: 한국방송통신대학교 컴퓨터과학과, HTML5웹프로그래밍 3강 「HTML 표현: 미디어, 시멘틱 요소」 강의자료
• 보충 확인: WHATWG, HTML Living Standard - Media elements, Sections, Interactive elements, Form elements (확인일: 2026-09-05)
• 편집 원칙: 올에이클래스 편집 정책
• 최종 내용 검토: 2026-09-05