멀티미디어 태그
텍스트와 이미지만 있는 정적인 웹페이지에 생동감을 불어넣는 동영상, 음악, 그리고 외부 웹페이지(유튜브 등)를 삽입하는 멀티미디어 태그들입니다.
특히 <iframe>은 내 웹페이지 안에 다른 웹사이트를 보여주는 "마법의 창문(액자)"입니다. 유튜브 영상 퍼가기, 구글 지도 퍼가기를 할 때 제공되는 코드가 바로 이 iframe 태그입니다.
🪟 내 웹사이트 벽에 구멍 뚫기 (iframe)
나의 웹페이지 (단단한 벽)
📺
유튜브 / 구글 지도 세상
벽 너머의 다른 사이트를 실시간으로 보여줍니다.
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<video> | controls, autoplay | mp4 등의 동영상 파일을 직접 삽입합니다. controls를 넣으면 재생, 일시정지, 볼륨 버튼이 자동으로 생깁니다. |
<audio> | controls, loop | mp3 등의 오디오 파일을 삽입합니다. loop를 넣으면 무한 반복 재생됩니다. |
<iframe> | src, allowfullscreen | 유튜브 영상, 구글 지도 등 다른 웹페이지나 콘텐츠를 내 웹페이지 내부에 창문처럼 띄웁니다. |
<!-- 비디오 플레이어 삽입 -->
<video controls width="100%">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
브라우저가 비디오를 지원하지 않습니다.
</video>
<!-- 유튜브 영상 액자처럼 삽입 -->
<iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>