방송대 방통대 HTML5웹프로그래밍 3강 - HTML 표현: 미디어와 시맨틱 요소 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 3강 - HTML 표현: 미디어와 시맨틱 요소

HTML5의 audio·video 요소를 이용해 미디어를 재생하고, 다중 소스와 재생 구간, 자막 트랙을 지정하는 방법을 학습한다. 이어서 문서의 의미 구조를 표현하는 시맨틱 요소와 figure, details, time, meter, progress, ruby, wbr, dialog 요소의 용도와 사용법을 정리한다.

1. HTML5 미디어 표현의 기본

HTML5 이전에는 웹 페이지에서 오디오나 비디오를 재생하기 위해 별도의 플러그인에 의존하는 경우가 많았다. HTML5는 audio와 video 요소를 제공하여 브라우저 자체 기능으로 미디어를 재생할 수 있게 한다. 재생 컨트롤, 자동 재생, 반복, 사전 로드 같은 동작은 요소의 속성으로 지정한다.

미디어 파일은 브라우저가 지원하는 형식과 코덱이어야 한다. 같은 콘텐츠라도 브라우저별 지원 형식이 다를 수 있으므로 하나의 src만 지정하기보다 source 요소로 여러 형식을 제공하면 호환성을 높일 수 있다.

구분	주요 요소	역할
오디오 재생	audio	음악·음성 등 소리 재생
비디오 재생	video	영상과 소리 재생
대체 소스	source	여러 미디어 형식과 MIME 타입 제공
자막·캡션	track	WebVTT 텍스트 트랙 연결

2. audio 요소와 재생 속성

기본 사용법

audio 요소의 src 속성에는 재생할 오디오 파일의 URL을 지정한다. 요소 안의 텍스트는 audio 요소를 지원하지 않는 브라우저에서 대체 안내로 표시된다.

<audio src="sound.mp3" controls>
  오디오를 지원하지 않는 브라우저입니다.
</audio>

주요 속성

속성	기능	주의점
controls	재생·일시정지·음량 등의 기본 조작 UI 표시	불리언 속성
autoplay	페이지 로드 후 자동 재생 시도	브라우저 정책에 따라 차단될 수 있음
loop	재생이 끝나면 처음부터 반복	불리언 속성
preload	미디어 데이터를 미리 읽는 방법 제안	브라우저가 반드시 그대로 따르는 것은 아님

preload="none"은 미리 내려받지 않도록 제안하고, preload="metadata"는 재생시간 같은 메타데이터만 먼저 읽도록 제안한다. preload="auto"는 브라우저가 필요하다고 판단하면 미디어 전체를 미리 받을 수 있게 한다. 아무 값 없이 preload만 쓰면 일반적으로 auto와 같은 의미로 처리된다.

자동 재생은 사용자 경험과 데이터 사용량에 영향을 주기 때문에 최신 브라우저에서 제한되는 경우가 많다. muted와 함께 사용하면 허용 범위가 넓어질 수 있지만, 실제 동작은 브라우저 정책에 달려 있다.

3. source 요소로 대체 소스 제공

audio와 video의 src 속성은 파일 하나만 직접 지정한다. 여러 형식을 제공하려면 미디어 요소 안에 source 요소를 나열한다. 브라우저는 위에서부터 지원 가능한 형식을 찾아 첫 번째로 재생 가능한 소스를 선택한다.

<audio controls preload="metadata">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.m4a" type="audio/mp4">
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.wav" type="audio/wav">
  오디오를 재생할 수 없습니다.
</audio>

source 요소의 src는 미디어 파일 위치이고 type은 MIME 타입이다. type을 지정하면 브라우저가 파일 전체를 내려받기 전에 지원 여부를 판단할 수 있다. 마지막의 대체 텍스트는 어떤 소스도 재생할 수 없거나 미디어 요소를 지원하지 않을 때 사용된다.

시험 핵심: source를 여러 개 사용할 때는 선호하는 형식 또는 호환성이 높은 형식을 위에 배치한다. 브라우저는 모든 파일을 동시에 재생하는 것이 아니라 지원 가능한 첫 소스를 선택한다.

4. video 요소와 영상 재생

video 요소는 오디오 요소의 src, controls, autoplay, loop, preload 속성을 기본적으로 공유한다. 여기에 화면 크기를 정하는 width와 height, 재생 전 표시할 이미지를 지정하는 poster, 인라인 재생을 요청하는 playsinline 등의 속성을 사용할 수 있다.

<video controls preload="metadata" poster="thumbnail.jpg"
       width="640" height="360" playsinline>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  비디오를 재생할 수 없습니다.
</video>

poster는 영상이 재생되기 전 또는 데이터를 아직 읽지 못했을 때 보여 줄 대표 이미지이다. width와 height를 지정하면 영상 로드 전에도 레이아웃 공간을 확보하는 데 도움이 된다. playsinline은 모바일 기기에서 전체 화면으로 강제 전환하지 않고 페이지 안에서 재생하도록 요청한다.

width와 height는 가능한 한 영상의 가로세로 비율에 맞게 지정한다. 비율이 맞지 않더라도 보통 영상 자체가 찌그러지기보다는 요소 내부에 여백이 생길 수 있다.

5. 미디어 재생 구간과 자막 처리

미디어 프래그먼트

미디어 URL 뒤에 #t=시작시간,종료시간을 붙이면 특정 구간의 재생을 요청할 수 있다. 시간은 초 단위 숫자 또는 시:분:초 형식으로 표현할 수 있다. 종료시간을 생략하면 지정한 시점부터 끝까지, 시작시간을 생략하면 처음부터 지정한 시점까지 재생한다.

<video src="movie.mp4#t=20,40" controls></video>
<video src="movie.mp4#t=,30" controls></video>
<video src="movie.mp4#t=30" controls></video>

이 방식은 미디어 파일 자체를 편집하여 잘라내는 것이 아니라 브라우저에 재생 시작·종료 범위를 전달한다. 더 세밀한 재생 제어가 필요할 때는 미디어 API의 currentTime 등을 사용할 수 있다.

track 요소

track 요소는 audio 또는 video에 자막, 캡션, 설명 같은 시간 기반 텍스트 정보를 연결한다. src에는 WebVTT 파일을 지정하고 kind는 트랙의 성격, srclang은 언어, label은 사용자에게 보일 이름을 나타낸다. default는 여러 트랙 중 기본 활성 트랙을 표시한다.

<video controls>
  <source src="movie.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>

WebVTT 파일

WebVTT 파일은 첫 줄에 WEBVTT를 쓰고, 각 큐마다 시작 시각과 종료 시각을 -->로 연결한 뒤 표시할 텍스트를 작성한다. 큐 사이에는 빈 줄을 둔다.

WEBVTT

00:00:02.000 --> 00:00:05.031
HTML5 미디어 요소를 학습합니다.

00:00:07.000 --> 00:00:10.000
자막은 track 요소로 연결합니다.

6. 시맨틱 요소와 문서 구조화

시맨틱 요소의 의미

시맨틱 요소는 요소가 문서에서 어떤 역할을 하는지 이름만으로 의미를 전달한다. header, nav, main, section, article, aside, footer 등이 대표적이다. div만으로도 화면을 나눌 수 있지만, 의미 있는 요소를 사용하면 브라우저·검색엔진·보조기술·개발자가 문서 구조를 더 분명하게 이해할 수 있다.

시맨틱 마크업은 접근성 향상, 검색엔진 최적화, 코드 가독성과 유지보수에 도움을 준다. 그러나 특정 요소를 사용한다고 자동으로 화면 배치가 완성되는 것은 아니다. 시각적 레이아웃은 CSS가 담당하고 HTML 요소는 콘텐츠의 의미와 구조를 나타낸다.

요소	대표 용도
header	페이지나 구획의 도입부, 제목·로고·검색·탐색 정보
nav	주요 내비게이션 링크 묶음
main	문서의 핵심 본문 콘텐츠
section	하나의 주제로 묶이는 문서 구획
article	독립적으로 배포·재사용 가능한 완결된 콘텐츠
aside	본문과 간접적으로 관련된 보조 콘텐츠
footer	페이지나 구획의 저자·저작권·연락처·관련 링크

7. header·footer·nav·aside·main

header와 footer

header는 페이지 전체뿐 아니라 section이나 article 같은 구획의 머리말에도 사용할 수 있다. 일반적으로 제목, 로고, 소개, 검색 폼, 탐색 링크 등을 포함한다. footer도 페이지 전체 또는 구획마다 사용할 수 있으며 저작권, 작성자, 연락처, 보조 링크 등을 담는다.

nav와 aside

nav는 사이트의 주요 메뉴나 문서 목차처럼 핵심적인 내비게이션 링크 묶음에 사용한다. 페이지의 모든 링크 묶음에 남용하지 않는다. aside는 본문과 간접적으로 관련된 광고, 용어 설명, 관련 정보 등을 표시한다. 화면의 오른쪽에 놓였다는 이유만으로 aside가 되는 것이 아니라 콘텐츠의 관계가 판단 기준이다.

main

main은 페이지의 중심 주제와 직접 관련된 핵심 콘텐츠를 나타낸다. 보통 한 문서에서 보이는 main은 하나만 사용하며 반복되는 사이트 헤더, 메뉴, 사이드바, 푸터는 제외한다. main은 article, aside, footer, header, nav의 자손으로 배치하지 않고 body의 주요 자식으로 구성하는 것이 원칙이다.

판단 기준: 요소 이름을 화면 위치로 결정하지 말고 콘텐츠의 역할로 결정한다. 옆에 배치된 핵심 글은 aside가 아닐 수 있고, 화면 중앙의 보조 정보는 aside일 수 있다.

8. section과 article의 구분

section

section은 관련된 콘텐츠를 하나의 주제로 묶는 문서 구획이다. 일반적으로 제목을 함께 두어 그 구획의 주제를 명확하게 한다. 장, 절, 탭 내용처럼 문서의 논리적 구성을 만들 때 적합하며 필요하면 section 안에 section을 중첩할 수 있다.

article

article은 블로그 게시물, 뉴스 기사, 포럼 글, 댓글처럼 문서의 다른 부분과 분리해도 독립적으로 이해·배포·재사용할 수 있는 완결된 콘텐츠를 나타낸다. article 안에 관련 article을 중첩하는 것도 가능하다.

div를 사용해야 하는 경우

section과 article은 단순히 디자인을 위한 상자가 아니다. 콘텐츠에 독립성이나 주제 구획이라는 의미가 없고 CSS 적용이나 스크립트 처리를 위한 컨테이너만 필요하다면 div를 사용하는 것이 적절하다.

판단 질문	적합한 요소
독립적으로 떼어 배포해도 의미가 완결되는가?	article
하나의 제목 아래 관련 내용을 주제별로 묶는가?	section
의미 없이 스타일·배치용 묶음만 필요한가?	div

9. figure·figcaption과 details·summary

figure와 figcaption

figure는 본문에서 참조되지만 위치를 옮겨도 문서의 흐름을 크게 해치지 않는 독립적인 콘텐츠를 묶는다. 이미지뿐 아니라 표, 차트, 코드, 동영상도 figure에 넣을 수 있다. figcaption은 figure의 제목이나 설명이며 선택적으로 사용한다.

figcaption을 사용한다면 figure의 첫 번째 또는 마지막 자식으로 배치한다. 설명이 필요 없는 콘텐츠라면 figure만 사용할 수도 있다.

<figure>
  <img src="flower.jpg" alt="노란 튤립">
  <figcaption>그림 1. 봄에 핀 노란 튤립</figcaption>
</figure>

details와 summary

details는 사용자가 열고 닫을 수 있는 추가 정보를 만든다. FAQ, 도움말, 참고 설명처럼 처음에는 감추었다가 필요할 때 확인하는 내용에 유용하다. summary는 details의 표시 제목이며 첫 번째 자식으로 둔다. details에 open 속성을 지정하면 처음부터 펼쳐진 상태로 표시된다.

<details open>
  <summary>HTML5란 무엇인가요?</summary>
  <p>웹 문서의 구조와 의미를 표현하는 마크업 언어입니다.</p>
</details>

10. time·meter·progress 요소

time 요소

time은 날짜나 시간을 사람이 읽는 텍스트와 기계가 해석할 수 있는 값으로 함께 표현한다. 화면에는 자연스러운 문구를 쓰고 datetime 속성에는 표준화된 날짜·시간 값을 넣는다. 검색엔진이나 일정 처리 프로그램이 시간을 정확히 인식하는 데 도움이 된다.

<p>방송일: <time datetime="2026-12-25">크리스마스</time></p>

meter 요소

meter는 알려진 범위 안의 스칼라 측정값을 표시한다. 배터리 잔량, 디스크 사용량, 평가 점수처럼 최소·최대 범위가 있는 수치에 사용한다. value는 현재 값, min과 max는 범위, low와 high는 낮은·높은 구간, optimum은 최적 구간을 나타낸다.

progress 요소

progress는 파일 다운로드나 작업 처리처럼 진행 중인 작업의 완료 정도를 나타낸다. max는 전체량이고 value는 완료량이다. 진행 정도를 알 수 없는 불확정 상태에서는 value 속성을 생략한다.

요소	표현 대상	대표 예
meter	알려진 범위 안의 정적인 측정값	배터리 70%, 점수 80점
progress	진행 중인 작업의 완료 정도	다운로드 60%, 처리 중

meter와 progress는 모양이 비슷할 수 있지만 의미가 다르다. 단순 점수나 저장공간 비율은 meter이고, 시간이 지나며 완료되는 작업은 progress이다.

11. ruby와 wbr 요소

ruby 주석

ruby는 한자나 일본어처럼 원문 글자 위나 아래에 발음 또는 보조 설명을 표시한다. rt는 주석 텍스트를, rp는 ruby를 지원하지 않는 브라우저에서 주석을 괄호로 둘러싸기 위한 대체 표시를 제공한다.

<ruby>
  漢<rp>(</rp><rt>한</rt><rp>)</rp>
  字<rp>(</rp><rt>자</rt><rp>)</rp>
</ruby>

wbr 줄바꿈 기회

wbr은 긴 URL이나 긴 단어처럼 기본적으로 줄바꿈되지 않는 문자열 안에서 줄바꿈해도 되는 위치를 알려 준다. 공간이 충분하면 줄을 바꾸지 않고, 공간이 부족할 때만 그 위치에서 줄바꿈할 수 있다. 반면 br은 그 위치에서 반드시 줄바꿈한다.

https://www.example.com/<wbr>products/<wbr>smartphone/<wbr>accessories

차이: br은 강제 줄바꿈, wbr은 조건부 줄바꿈 기회이다. 긴 문자열의 레이아웃이 깨지는 것을 예방하려면 wbr 또는 CSS의 word-break·overflow-wrap을 활용한다.

12. dialog 팝업과 모달창

dialog 요소는 페이지 안에서 대화상자, 알림, 확인창 같은 팝업 UI를 표현한다. 별도의 UI 라이브러리 없이 브라우저의 기본 대화상자 기능과 접근성 의미를 사용할 수 있다. open 속성이 있으면 대화상자가 보이며, 자바스크립트 메서드로 열고 닫을 수 있다.

구분	여는 방법	특징
비모달	show()	대화상자 밖의 페이지도 계속 조작 가능
모달	showModal()	대화상자 밖과의 상호작용을 막고 최상위 계층에 표시
닫기	close()	대화상자를 닫고 필요하면 반환값 저장

모달 대화상자가 열리면 배경 영역은 ::backdrop 의사 요소로 꾸밀 수 있다. form에 method="dialog"를 지정하면 폼 제출로 대화상자를 닫는 구성을 만들 수 있고, autofocus로 처음 초점을 받을 컨트롤을 지정할 수 있다. 키보드의 ESC 키는 일반적으로 모달 dialog의 취소 동작에 사용된다.

<dialog id="confirmDialog">
  <p>정말 삭제하시겠습니까?</p>
  <form method="dialog">
    <button value="cancel">취소</button>
    <button value="ok" autofocus>확인</button>
  </form>
</dialog>

dialog의 open 속성만 직접 추가하는 것과 showModal()로 여는 것은 같지 않다. 모달 동작과 backdrop이 필요하면 showModal()을 사용해야 한다.

핵심 개념 정리

audio와 video는 HTML5의 내장 미디어 재생 요소이다. controls, autoplay, loop, preload를 공통으로 사용하며 video에는 width, height, poster, playsinline 등을 추가할 수 있다. source는 여러 형식의 대체 파일을 제공하고, track은 WebVTT 자막·캡션·설명을 연결한다.

시맨틱 요소는 콘텐츠의 역할을 나타낸다. header와 footer는 페이지 또는 구획의 머리말과 꼬리말, nav는 주요 탐색 링크, main은 핵심 본문, section은 주제별 구획, article은 독립 콘텐츠, aside는 보조 콘텐츠를 표현한다. 단순 스타일 묶음에는 div를 사용한다.

figure와 figcaption은 독립 콘텐츠와 설명, details와 summary는 접고 펼치는 추가 정보, time은 기계가 읽을 수 있는 날짜·시간, meter는 범위가 알려진 측정값, progress는 작업 진행률을 나타낸다. ruby는 발음 주석, wbr은 조건부 줄바꿈 지점, dialog는 비모달·모달 대화상자를 제공한다.

최종 정리: 올바른 HTML5 마크업은 화면에 보이는 결과만 만드는 것이 아니라 콘텐츠의 의미, 미디어 대체 수단, 문서 구조와 사용자 상호작용까지 브라우저와 보조기술이 이해할 수 있게 표현해야 한다.

예상문제 20선

1. audio 요소에서 브라우저 기본 재생 조작 UI를 표시하는 속성은?

① autoplay ② controls ③ preload ④ loop

정답입니다.

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

정답 및 해설 보기

정답: ②
controls 속성은 재생·일시정지·음량 등 브라우저가 제공하는 기본 조작 인터페이스를 표시한다.

2. preload="metadata"의 의미로 가장 적절한 것은?

① 미디어 전체를 반드시 내려받는다. ② 미디어를 반복 재생한다. ③ 자동 재생을 강제한다. ④ 재생시간 등 메타데이터를 미리 읽도록 브라우저에 제안한다.

정답입니다.

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

정답 및 해설 보기

정답: ④
metadata 값은 전체 파일보다 재생시간 같은 메타데이터를 우선 읽도록 제안한다. 최종 로드 동작은 브라우저가 결정할 수 있다.

3. 미디어 요소 안에 여러 source 요소를 두는 주된 목적은?

① 여러 파일을 동시에 재생하기 위해 ② 재생 속도를 두 배로 만들기 위해 ③ 브라우저가 지원하는 형식을 선택할 수 있게 하기 위해 ④ 자막을 자동 번역하기 위해

정답입니다.

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

정답 및 해설 보기

정답: ③
브라우저는 source를 위에서부터 검사해 자신이 지원하는 첫 번째 미디어 형식을 선택한다.

4. video 요소의 poster 속성은 무엇을 지정하는가?

① 재생 전 표시할 대표 이미지 ② 영상 자막 언어 ③ 반복 횟수 ④ 오디오 음량

정답입니다.

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

정답 및 해설 보기

정답: ①
poster는 영상이 시작되기 전이나 데이터를 아직 불러오지 못했을 때 표시할 대표 이미지 URL을 지정한다.

5. 미디어 URL의 #t=20,40이 나타내는 것은?

① 20번과 40번 파일을 재생한다. ② 볼륨을 20에서 40으로 조절한다. ③ 20초마다 40회 반복한다. ④ 20초부터 40초까지의 재생 구간을 요청한다.

정답입니다.

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

정답 및 해설 보기

정답: ④
미디어 프래그먼트의 t는 시간 구간을 뜻한다. #t=20,40은 20초에 시작해 40초에 끝나는 구간이다.

6. track 요소에서 텍스트 트랙의 성격을 지정하는 속성은?

① label ② kind ③ poster ④ controls

정답입니다.

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

정답 및 해설 보기

정답: ②
kind는 subtitles, captions, descriptions 등 텍스트 트랙의 용도를 지정한다.

7. WebVTT 파일의 첫 줄에 작성하는 식별자는?

① WEBVTT ② DOCTYPE ③ TRACK ④ SUBTITLE

정답입니다.

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

정답 및 해설 보기

정답: ①
WebVTT 자막 파일은 첫 줄의 WEBVTT 식별자로 시작한다.

8. 시맨틱 요소를 사용하는 주된 이유로 옳은 것은?

① 모든 CSS를 자동 생성하기 위해 ② 자바스크립트를 없애기 위해 ③ 콘텐츠의 역할과 문서 구조를 명확히 전달하기 위해 ④ 이미지 용량을 줄이기 위해

정답입니다.

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

정답 및 해설 보기

정답: ③
시맨틱 요소는 브라우저, 검색엔진, 보조기술, 개발자에게 콘텐츠의 의미와 구조를 전달한다.

9. 사이트의 주요 내비게이션 링크 묶음에 가장 적합한 요소는?

① aside ② nav ③ footer ④ figure

정답입니다.

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

정답 및 해설 보기

정답: ②
nav는 주요 메뉴나 문서 목차처럼 핵심적인 탐색 링크 묶음을 나타낸다.

10. 본문과 간접적으로 관련된 광고·용어 설명·관련 정보를 나타내는 요소는?

① main ② article ③ aside ④ header

정답입니다.

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

정답 및 해설 보기

정답: ③
aside는 본문의 중심 흐름과 간접적으로 관련된 보조 콘텐츠를 나타낸다. 화면 위치가 아니라 콘텐츠 관계로 판단한다.

11. main 요소의 사용 원칙으로 옳은 것은?

① 한 문서에 보이는 main을 여러 개 반복한다. ② 항상 nav 안에 넣는다. ③ 페이지의 저작권 정보만 담는다. ④ 문서의 핵심 본문을 나타내며 보통 보이는 main은 하나만 둔다.

정답입니다.

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

정답 및 해설 보기

정답: ④
main은 페이지의 중심 주제와 직접 관련된 핵심 콘텐츠를 담는다. 반복되는 헤더·메뉴·푸터는 제외한다.

12. 독립적으로 배포하거나 재사용해도 의미가 완결되는 콘텐츠에 적합한 요소는?

① article ② section ③ div ④ aside

정답입니다.

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

정답 및 해설 보기

정답: ①
article은 블로그 글, 뉴스 기사, 포럼 글처럼 독립적으로 이해·배포 가능한 콘텐츠를 나타낸다.

13. 의미 있는 주제 구획이 아니라 CSS 배치를 위한 컨테이너만 필요할 때 적합한 요소는?

① div ② section ③ article ④ main

정답입니다.

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

정답 및 해설 보기

정답: ①
스타일이나 배치를 위한 단순 묶음에는 의미가 없는 div를 사용한다. section과 article을 디자인 용도로 남용하지 않는다.

14. figcaption을 figure 안에서 사용할 수 있는 위치는?

① figure 바깥에만 ② 임의의 중간 위치에만 ③ 두 번째 자식으로만 ④ figure의 첫 번째 또는 마지막 자식

정답입니다.

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

정답 및 해설 보기

정답: ④
figcaption은 figure의 선택적 설명으로, 사용할 때 figure의 첫 번째 또는 마지막 자식으로 둔다.

15. details 요소를 처음부터 펼쳐진 상태로 만드는 속성은?

① controls ② open ③ default ④ expanded

정답입니다.

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

정답 및 해설 보기

정답: ②
details에 open 불리언 속성을 지정하면 초기 상태가 펼쳐진 상태가 된다.

16. meter 요소에 가장 적합한 사용 사례는?

① 파일 다운로드 진행 중 ② 결과를 알 수 없는 처리 대기 ③ 최대 100점에서 현재 점수 78점 ④ 팝업 대화상자

정답입니다.

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

정답 및 해설 보기

정답: ③
meter는 알려진 범위 안의 측정값을 표시한다. 작업 진행 정도는 progress가 담당한다.

17. progress 요소에서 진행 정도를 알 수 없는 불확정 상태를 나타내는 방법은?

① max를 생략하고 value는 0으로 둔다. ② meter로 바꾼다. ③ open 속성을 사용한다. ④ value 속성을 생략한다.

정답입니다.

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

정답 및 해설 보기

정답: ④
progress의 value를 생략하면 완료량을 알 수 없는 불확정 진행 상태가 된다.

18. wbr 요소와 br 요소의 차이로 옳은 것은?

① wbr은 줄바꿈 기회이고 br은 강제 줄바꿈이다. ② 둘 다 항상 강제 줄바꿈한다. ③ br은 긴 URL에서만 쓸 수 있다. ④ wbr은 문단을 끝낸다.

정답입니다.

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

정답 및 해설 보기

정답: ①
wbr은 공간이 부족할 때 줄을 바꿔도 되는 위치를 제안하고, br은 그 위치에서 반드시 줄을 바꾼다.

19. dialog를 모달 방식으로 여는 메서드는?

① open() ② show() ③ showModal() ④ display()

정답입니다.

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

정답 및 해설 보기

정답: ③
showModal()은 대화상자를 최상위 계층의 모달로 열어 바깥 페이지와의 상호작용을 막는다.

20. 비모달 dialog에 대한 설명으로 옳은 것은?

① 항상 ::backdrop이 적용된다. ② show()로 열며 대화상자 밖의 페이지도 조작할 수 있다. ③ ESC 외에는 닫을 수 없다. ④ 페이지 전체를 자동으로 비활성화한다.

정답입니다.

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

정답 및 해설 보기

정답: ②
show()로 연 비모달 dialog는 표시되는 동안에도 대화상자 밖의 페이지와 상호작용할 수 있다.