[HTML 핵심강좌] 10. HTML 미디어 요소

HTML 미디어 요소는 오디오, 비디오, 그림 및 애니메이션과 같은 미디어 콘텐츠를 삽입할 수 있는 태그입니다. 이러한 요소를 사용하면 웹 페이지에서 미디어 콘텐츠를 표시하고 컨트롤 할 수 있습니다.

 

1. audio 요소

audio 요소는 오디오 콘텐츠를 삽입하는 데 사용됩니다. src 속성을 사용하여 오디오 파일의 URL을 지정하고, controls 속성을 사용하여 오디오 컨트롤을 표시합니다.

<audio src="audiofile.mp3" controls>
Your browser does not support the audio element.
</audio>

 

2. video 요소

video 요소는 비디오 콘텐츠를 삽입하는 데 사용됩니다. src 속성을 사용하여 비디오 파일의 URL을 지정하고, controls 속성을 사용하여 비디오 컨트롤을 표시합니다.

<video src="videofile.mp4" controls>
Your browser does not support the video element.
</video>

 

3. picture 요소

picture 요소는 웹 페이지에서 다양한 크기의 이미지를 표시하는 데 사용됩니다. source 요소를 사용하여 이미지 파일의 URL과 크기를 지정할 수 있으며, img 요소를 사용하여 대체 이미지를 지정할 수 있습니다.

<picture>
    <source media="(min-width: 650px)" srcset="large.jpg">
    <source media="(min-width: 465px)" srcset="medium.jpg">
    <img src="small.jpg" alt="A tiger">
</picture>

 

4. canvas 요소

canvas 요소는 그림을 그리기 위한 빈 요소입니다. JavaScript를 사용하여 그림을 그릴 수 있으며, 그림을 저장하거나 이미지로 내보낼 수도 있습니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

 

5. iframe 요소

iframe 요소는 다른 웹 페이지를 현재 페이지에 삽입하는 데 사용됩니다. src 속성을 사용하여 삽입할 웹 페이지의 URL을 지정합니다.

<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>