멀티미디어 태그
멀티미디어 태그 (비디오, 오디오, 아이프레임)
텍스트와 이미지만 있는 정적인 웹페이지에 생동감을 불어넣기 위해, 동영상(
또한
<video>)이나 음악(<audio>) 파일을 직접 삽입할 수 있습니다.또한
<iframe> 태그를 이용하면, 유튜브 영상이나 구글 지도처럼 아예 다른 외부 웹사이트의 화면 자체를 내 홈페이지 안에 쏙 집어넣을 수도 있습니다.
1. 내 웹사이트 벽에 구멍 뚫기 (iframe 비유)
유튜브 영상 퍼가기 기능은 어떻게 작동할까요? 바로 내 웹페이지에 창문을 내는 원리입니다.
나의 웹페이지 (단단한 벽)
🪟
<iframe src="youtube.com/...?v=1778809392142">
마치 창문을 통해 밖을 보듯, 벽 너머의 다른 사이트를 실시간으로 보여줍니다.
2. 멀티미디어 태그 핵심 정리
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<video> |
controls, autoplay |
mp4 등의 동영상 파일을 직접 삽입합니다. controls 속성을 꼭 넣어야 재생, 일시정지, 볼륨 버튼이 화면에 생깁니다. |
<audio> |
controls, loop |
mp3 등의 오디오 파일을 삽입합니다. loop를 넣으면 음악이 끝나도 무한 반복 재생됩니다. |
<iframe> |
src, allowfullscreen |
유튜브 영상, 구글 지도 등 다른 웹페이지의 콘텐츠 전체를 내 웹페이지 내부의 네모난 액자(창문) 안에 띄워줍니다. |