[HTML] 개념노트 16편 iframe, video, audio 태그 이해하기

HTML 개념노트 16편

iframe, video, audio 태그 이해하기

웹페이지에는 글과 이미지뿐 아니라 외부 페이지, 영상, 음악 같은 미디어도 넣을 수 있습니다. 이번 글에서는 외부 콘텐츠를 삽입하는 <iframe>, 영상을 재생하는 <video>, 오디오를 재생하는 <audio> 태그를 정리해 보겠습니다.

1. 미디어 태그란?

HTML에서는 웹페이지 안에 다양한 미디어를 넣을 수 있습니다. 대표적으로 유튜브 영상, 지도, 다른 웹페이지, 직접 업로드한 동영상, 음악 파일 등이 있습니다.

이때 사용하는 대표 태그가 <iframe>, <video>, <audio>입니다.

<iframe src="외부 페이지 주소"></iframe>

<video src="movie.mp4" controls></video>

<audio src="music.mp3" controls></audio>

쉽게 말하면?

<iframe>은 다른 화면을 내 페이지 안에 넣는 태그이고, <video>는 영상 플레이어, <audio>는 음악 플레이어를 만드는 태그입니다.

2. <iframe> 태그

<iframe> 태그는 현재 웹페이지 안에 다른 웹페이지나 외부 콘텐츠를 삽입할 때 사용합니다. 유튜브 영상, 지도, 외부 문서, 임베드 위젯 등을 넣을 때 자주 볼 수 있습니다.

<iframe src="https://example.com"
        width="600"
        height="400">
</iframe>

위 코드는 https://example.com 페이지를 현재 페이지 안에 가로 600px, 세로 400px 크기로 보여줍니다.

속성	역할
src	삽입할 외부 콘텐츠 주소를 지정합니다.
width	iframe의 너비를 지정합니다.
height	iframe의 높이를 지정합니다.
title	iframe 콘텐츠의 설명을 작성합니다.

3. iframe에 title을 넣는 이유

<iframe>에는 title 속성을 작성하는 것이 좋습니다. 화면을 보는 사용자에게는 크게 티가 나지 않지만, 스크린 리더 같은 보조 기술이 iframe의 내용을 이해하는 데 도움이 됩니다.

<iframe src="https://example.com"
        title="예제 웹페이지"
        width="600"
        height="400">
</iframe>

핵심 포인트

iframe을 사용할 때는 src, width, height뿐 아니라 title도 함께 작성하는 습관이 좋습니다.

4. 유튜브 영상 삽입 예시

유튜브 영상을 웹페이지에 넣을 때도 iframe을 사용합니다. 유튜브 공유 메뉴에서 “퍼가기” 코드를 복사하면 iframe 코드가 제공됩니다.

<iframe width="560"
        height="315"
        src="https://www.youtube.com/embed/영상ID"
        title="YouTube video player"
        allowfullscreen>
</iframe>

일반 유튜브 주소와 임베드 주소는 다릅니다. iframe에는 보통 youtube.com/embed/영상ID 형태의 주소가 들어갑니다.

주의하세요

모든 웹사이트가 iframe 삽입을 허용하는 것은 아닙니다. 보안 설정 때문에 iframe 안에서 열리지 않는 사이트도 있습니다.

5. 반응형 iframe 만들기

iframe의 크기를 고정값으로만 지정하면 모바일 화면에서 넘칠 수 있습니다. 그래서 블로그나 반응형 페이지에서는 iframe을 감싸는 박스를 활용하는 경우가 많습니다.

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
  <iframe src="https://www.youtube.com/embed/영상ID"
          title="동영상"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          allowfullscreen>
  </iframe>
</div>

padding-bottom: 56.25%는 16:9 비율을 만들기 위해 자주 사용하는 방식입니다.

6. <video> 태그

<video> 태그는 웹페이지에서 동영상 파일을 재생할 때 사용합니다. 직접 가지고 있는 mp4, webm 같은 영상 파일을 넣을 수 있습니다.

<video src="sample.mp4" controls width="600">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

controls 속성을 넣으면 재생, 일시정지, 볼륨 조절 같은 기본 컨트롤러가 표시됩니다.

속성	역할
src	동영상 파일 경로를 지정합니다.
controls	재생 컨트롤러를 표시합니다.
autoplay	가능한 경우 자동 재생합니다.
muted	음소거 상태로 재생합니다.
loop	영상이 끝나면 반복 재생합니다.
poster	영상 재생 전 보여줄 대표 이미지를 지정합니다.

7. source 태그로 여러 영상 형식 제공하기

브라우저마다 지원하는 영상 형식이 다를 수 있습니다. 그래서 <source> 태그를 사용해서 여러 형식의 파일을 제공할 수 있습니다.

<video controls width="600" poster="thumbnail.jpg">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

브라우저는 위에서부터 읽으면서 재생 가능한 형식을 선택합니다.

실무 팁

영상에는 controls를 넣어 사용자가 직접 재생을 제어할 수 있게 하는 것이 좋습니다. 자동 재생은 사용자 경험을 해칠 수 있으므로 신중하게 사용해야 합니다.

8. autoplay를 사용할 때 주의할 점

autoplay는 페이지가 열릴 때 영상을 자동 재생하려는 속성입니다. 하지만 브라우저 정책에 따라 소리가 있는 영상은 자동 재생이 막힐 수 있습니다.

<video src="intro.mp4" autoplay muted loop></video>

그래서 자동 재생이 필요한 배경 영상은 보통 muted와 함께 사용합니다.

기억하세요

자동 재생이 필요하다면 autoplay muted 조합을 자주 사용합니다. 하지만 중요한 콘텐츠라면 사용자가 직접 재생할 수 있도록 controls를 제공하는 것이 좋습니다.

9. <audio> 태그

<audio> 태그는 웹페이지에서 오디오 파일을 재생할 때 사용합니다. 음악, 효과음, 강의 음성, 녹음 파일 등을 넣을 수 있습니다.

<audio src="music.mp3" controls>
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

<audio>도 <video>처럼 controls 속성을 넣어야 사용자가 재생 버튼을 볼 수 있습니다.

속성	역할
src	오디오 파일 경로를 지정합니다.
controls	오디오 컨트롤러를 표시합니다.
autoplay	가능한 경우 자동 재생합니다.
loop	오디오를 반복 재생합니다.
muted	음소거 상태로 시작합니다.

10. source 태그로 여러 오디오 형식 제공하기

오디오도 여러 형식을 제공할 수 있습니다. 대표적으로 mp3, ogg, wav 같은 형식이 있습니다.

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

사용자의 브라우저가 재생 가능한 파일 형식을 선택해서 실행합니다.

11. iframe, video, audio 한눈에 비교

태그	역할	사용 예시
<iframe>	외부 콘텐츠 삽입	유튜브 영상, 지도, 외부 페이지
<video>	동영상 파일 재생	mp4, webm 영상
<audio>	오디오 파일 재생	mp3, ogg, wav 음성

12. 초보자가 자주 하는 실수

실수 1. iframe에 일반 유튜브 주소를 그대로 넣음

유튜브 iframe에는 보통 watch?v= 주소가 아니라 /embed/영상ID 형태의 주소를 사용합니다.

실수 2. video나 audio에 controls를 빼먹음

controls가 없으면 사용자가 재생 버튼을 보기 어렵습니다. 특별한 UI를 따로 만들지 않는다면 controls를 넣는 것이 좋습니다.

실수 3. 큰 영상을 자동 재생으로 넣음

자동 재생 영상은 사용자 경험을 해칠 수 있고, 모바일 데이터 사용량도 늘릴 수 있습니다. 꼭 필요한 경우에만 신중하게 사용하는 것이 좋습니다.

실수 4. 파일 경로를 잘못 작성함

src 경로가 잘못되면 영상이나 오디오가 재생되지 않습니다. 파일명, 확장자, 폴더 위치를 먼저 확인해야 합니다.

13. 오늘의 핵심 정리

• <iframe>은 외부 콘텐츠를 현재 페이지 안에 삽입할 때 사용합니다.
• iframe에는 src, title, width, height 등을 사용할 수 있습니다.
• <video>는 동영상 파일을 재생할 때 사용합니다.
• <audio>는 오디오 파일을 재생할 때 사용합니다.
• controls는 재생 컨트롤러를 표시합니다.
• source 태그를 사용하면 여러 파일 형식을 제공할 수 있습니다.
• 자동 재생은 브라우저 정책과 사용자 경험을 고려해 신중하게 사용해야 합니다.
• 미디어 파일이 재생되지 않으면 src 경로와 파일 형식을 먼저 확인해야 합니다.

14. 간단한 연습 문제

아래 조건에 맞게 iframe, video, audio 태그를 작성해 보세요.

문제

• 유튜브 영상을 iframe으로 삽입하기
• iframe에는 title 작성하기
• sample.mp4 영상을 video 태그로 재생하기
• music.mp3 파일을 audio 태그로 재생하기
• video와 audio에는 controls 속성 넣기

정답 보기

<iframe src="https://www.youtube.com/embed/영상ID"
        title="HTML 학습 영상"
        width="560"
        height="315"
        allowfullscreen>
</iframe>

<video src="sample.mp4" controls width="600">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

<audio src="music.mp3" controls>
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

다음 편 예고

다음 글에서는 검색엔진과 브라우저가 문서를 이해하는 데 도움을 주는 meta 태그와 SEO 기본을 정리합니다.

GWDEVELBlog HTML 개념노트