HTML 강좌 / audio, video, iframe으로 미디어와 외부 콘텐츠 삽입하기
HTML에서는 audio와 video로 미디어 파일을 재생하고, iframe으로 다른 페이지의 콘텐츠를 삽입할 수 있습니다. 파일 경로, 대체 안내, 자막, 외부 콘텐츠의 신뢰성과 접근성을 함께 고려해야 합니다.
audio와 video로 파일 재생하기
다음 예제는 HTML 파일과 같은 폴더에 sample.mp3, sample.mp4, sample-poster.webp가 있다고 가정합니다. 실제로 실행하려면 사용할 권리가 있는 파일을 준비하고 파일명을 코드에 맞추세요.
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
이 브라우저는 오디오 재생을 지원하지 않습니다.
</audio>
<video controls width="640" height="360" poster="sample-poster.webp">
<source src="sample.mp4" type="video/mp4">
<track src="sample-ko.vtt" kind="captions" srclang="ko"
label="한국어 자막" default>
이 브라우저는 비디오 재생을 지원하지 않습니다.
</video>
controls는 재생·일시정지 등의 기본 조작 화면을 제공합니다. poster는 동영상 재생 전 보이는 이미지입니다. 대사가 있거나 중요한 소리가 담긴 동영상이라면 정확한 자막 파일을 마련하세요. 예제의 sample-ko.vtt는 실제 파일을 만들거나 준비해야 합니다. 파일이 없으면 자막은 표시되지 않습니다.
자막 파일은 UTF-8 텍스트로 저장하는 WebVTT 형식을 사용할 수 있습니다. 예를 들어 아래 내용을 sample-ko.vtt로 저장하면 첫 3초 동안 자막 한 줄을 표시하는 기본 구조가 됩니다. 실제 동영상에는 말과 중요한 소리를 빠짐없이 옮기고 시간도 영상에 맞춰 조정해야 합니다.
WEBVTT 00:00:00.000 --> 00:00:03.000 작은 정원에 오신 것을 환영합니다.
오디오의 내용이 중요한 경우에는 재생 도구만 제공하지 말고 글로 된 대본도 준비하세요. 자동 재생은 사용자가 예상하지 못한 소리를 낼 수 있으므로 예제처럼 직접 재생하게 두는 편이 안전합니다. 여러 형식을 제공할 때는 source를 추가할 수 있지만, 확장자만 바꾼 같은 파일은 호환 형식이 되지 않습니다.
iframe으로 외부 콘텐츠 삽입하기
iframe은 다른 문서를 현재 페이지 안에 표시합니다. 다음 주소는 예시이며, 실제 서비스가 제공하는 공식 임베드 주소로 바꿔야 합니다.
<iframe src="https://example.com/embed/example" title="예제 콘텐츠 소개" width="640" height="360" loading="lazy"></iframe>
title은 삽입된 프레임의 목적을 설명합니다. 외부 사이트가 임베드를 허용하지 않으면 주소가 맞아도 표시되지 않을 수 있습니다. 외부 콘텐츠는 개인정보·쿠키·성능에 영향을 줄 수 있으므로 신뢰할 수 있는 제공자의 공식 임베드 코드를 확인하고 필요한 범위에서만 사용하세요.
example.com 주소는 동작하는 동영상 서비스가 아니라 코드 구조를 보여 주기 위한 자리표시자입니다. 임베드가 보이지 않는다고 해서 iframe 태그가 틀린 것은 아닐 수 있습니다. 실제 제공자의 임베드 주소와 허용 정책을 먼저 확인하세요. 삽입된 콘텐츠가 없어도 핵심 정보를 알 수 있도록 주변 본문에 제목과 맥락을 적는 것이 좋습니다.
재생되지 않거나 잘릴 때
- 파일이 실제 경로에 있는지, 서버가 올바른 미디어 형식으로 제공하는지 확인합니다.
- 브라우저가 해당 파일의 인코딩 형식을 재생할 수 있는지 확인합니다.
- 좁은 화면에서는 CSS로 최대 너비를 조절하되 영상 비율이 왜곡되지 않는지 확인합니다.
- 외부 페이지는 임베드 정책과 제공자의 사용 조건을 확인합니다.
속성별 설명은 MDN video 요소 문서와 MDN iframe 요소 문서에서 확인할 수 있습니다.
HTML 강좌 / 문서 제목·설명·언어·문자 인코딩 설정하기
title, meta description, html lang, UTF-8 문자 인코딩, viewport의 역할을 완성된 HTML 문서 예제로 설명합니다.
HTML 문서를 이루는 doctype, html, head, body의 역할과 기본 작성 순서를 예제로 설명합니다. 문서 정보와 페이지 본문을 구분하고 첫 HTML 파일을 직접 만들어 볼 수 있습니다.
HTML 강좌 / label과 input으로 입력 필드 만들기
label의 for와 input의 id를 연결하는 방법, name의 제출 역할, placeholder가 레이블을 대신할 수 없는 이유를 설명합니다.
HTML의 em, strong, q, blockquote, abbr, code, kbd를 상황에 맞게 쓰는 방법을 예제로 설명합니다. 글자의 모양이 아니라 텍스트의 의미를 표시하는 기준을 익힐 수 있습니다.
HTML / Tutorial / 연속된 공백 넣는 방법
HTML에서 연속된 공백은 하나의 공백으로 처리합니다. 소스 코드에서 여러 칸을 띄어써도 브라우저에서는 한 칸을 띄어쓴 것으로 표현됩니다. 연속된 공백을 넣고 싶다면 특수 문자 를 사용합니다.
HTML 강좌 / 여러 페이지로 된 작은 사이트 만들기
홈·소개·문의 페이지를 연결하는 작은 사이트를 만들고 메뉴, 양식, 키보드 조작과 문서 오류를 점검하는 종합 실습입니다.
HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할
HTML은 웹페이지의 콘텐츠에 구조와 의미를 부여합니다. HTML·CSS·JavaScript의 역할을 비교하고, 간단한 코드가 브라우저에 표시되는 과정과 첫 HTML 파일을 만드는 방법을 알아봅니다.
HTML 검사 도구로 문법 오류를 찾고 수정한 뒤 링크, 키보드 조작, 모바일 표시까지 확인하는 절차를 안내합니다.
HTML 강좌 / 읽기 쉬운 표 만들기: caption, th, scope, 셀 병합
caption과 제목 셀의 scope로 표의 관계를 분명히 하고, colspan·rowspan으로 셀을 병합할 때 주의할 점을 설명합니다.
HTML 강좌 / 이미지 넣기: img, alt, 크기
HTML img 요소로 이미지를 넣고 alt 대체 텍스트와 width·height를 설정하는 방법을 설명합니다. 실제 예제 이미지로 경로와 크기 문제도 확인할 수 있습니다.