Ch.8 시맨틱 HTML + 멀티미디어

멀티미디어 임베딩

video, audio 태그로 미디어를 삽입할 수 있다iframe으로 YouTube 영상을 임베드할 수 있다figure/figcaption으로 미디어에 캡션을 추가할 수 있다

텍스트와 이미지만으로는 부족할 때가 있습니다

동영상 강의, 팟캐스트, YouTube 삽입 — HTML5부터는 플러그인 없이도 브라우저가 직접 미디어를 재생합니다.

HTML에서 동영상과 오디오를 어떻게 삽입할까?

<video>, <audio>, <iframe> — HTML5 멀티미디어 태그로 풍부한 콘텐츠를 만들어봅시다.

article

핵심 내용

HTML5는 플러그인 없이 미디어를 재생합니다

<!-- 비디오 삽입 -->
<video controls width="600">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  브라우저가 비디오를 지원하지 않습니다.
</video>

<!-- 오디오 삽입 -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

YouTube 영상 임베드와 캡션 추가하기

<!-- YouTube 임베드 -->
<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay;
         clipboard-write; encrypted-media"
  allowfullscreen>
</iframe>

<!-- figure + figcaption: 캡션 달기 -->
<figure>
  <img src="screenshot.png"
       alt="홈페이지 스크린샷">
  <figcaption>
    완성된 홈페이지의 모습
  </figcaption>
</figure>

<iframe> = 외부 웹페이지를 현재 페이지에 삽입 (YouTube, 지도 등) <figure> = 이미지, 다이어그램, 코드 등 독립 콘텐츠를 감쌈 <figcaption> = figure 안에서 캡션(설명)을 추가

다양한 미디어 태그로 포트폴리오 페이지를 만들어봅시다

YouTube 영상을 웹 페이지에 삽입할 때 사용하는 태그는?

<figcaption>은 <figure> 태그 바깥에서도 사용할 수 있다

aria-label 속성은 시각적으로 보이는 텍스트를 변경한다

멀티미디어 마스터!

key

핵심 용어

▶️

controls

재생/일시정지/볼륨 컨트롤 표시

🔄

autoplay

페이지 로드 시 자동 재생 (비권장)

🔇

muted

음소거 상태로 시작

🔁

loop

반복 재생

🖼️

poster

비디오 썸네일 이미지 지정 (video 전용)

edit_note

정리 노트

멀티미디어 임베딩

멀티미디어 태그

<video>
동영상 재생 — controls 속성으로 재생 버튼 표시
<audio>
오디오 재생 — MP3, WAV 등 지원
<iframe>
외부 콘텐츠 삽입 — YouTube, 지도 등

주요 속성

controls
재생/정지/볼륨 등 컨트롤 바 표시
autoplay
페이지 로드 시 자동 재생 (음소거 필수)
poster
동영상 썸네일 이미지 지정
★

iframe으로 YouTube를 삽입할 때는 공유 > 퍼가기 코드를 사용하세요.

check_circle

핵심 정리

  • 1<video> / <audio>로 미디어 직접 삽입 (controls 필수)
  • 2<iframe>으로 YouTube, 지도 등 외부 콘텐츠 임베드
  • 3<figure> + <figcaption>으로 캡션이 있는 미디어 표시

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작