[HTML] 이미지와 멀티미디어

이미지 삽입

웹 페이지에서 이미지를 삽입하는데는 <img> 태그를 사용합니다. <img> 태그는 src 속성을 통해 이미지 파일의 경로를 지정하며, 웹 페이지에 이미지를 표시할 때 사용됩니다.

<img src="image.jpg" alt="이미지 설명">

위의 예제에서 "image.jpg"라는 이미지 파일을 웹 페이지에 삽입합니다. alt 속성은 이미지를 표시할 수 없는 상황에서 대체 텍스트로 사용됩니다. 이는 웹 접근성에 중요한 요소로, 스크린 리더(Screen Reader) 등의 보조 기기를 사용하는 사용자들에게 이미지의 내용을 전달합니다.

---

비디오 삽입

HTML5에서는 비디오 삽입을 위해 <video> 태그를 사용합니다. src 속성에 비디오 파일의 경로를 지정하고, controls 속성을 추가하면 재생 컨트롤 버튼이 표시됩니다.

<video src="video.mp4" controls>
    비디오를 지원하지 않는 브라우저입니다.
</video>

위의 예제에서 "video.mp4"라는 비디오 파일을 웹 페이지에 삽입하며, 사용자가 비디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있습니다. 만약 브라우저가 비디오를 지원하지 않을 경우 대체 메시지인 "비디오를 지원하지 않는 브라우저입니다."가 표시됩니다.

---

오디오 삽입

오디오를 삽입하기 위해서는 <audio> 태그를 사용합니다. src 속성에 오디오 파일의 경로를 지정하고, controls 속성을 추가하면 재생 컨트롤 버튼이 표시됩니다.

<audio src="audio.mp3" controls>
    오디오를 지원하지 않는 브라우저입니다.
</audio>

위의 예제에서 "audio.mp3"라는 오디오 파일을 웹 페이지에 삽입하며, 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있습니다. 오디오 또한 브라우저에서 지원하지 않을 경우 대체 메시지가 표시됩니다.

---

비디오와 오디오 포맷 지정

비디오와 오디오 파일은 다양한 포맷을 지원합니다. 하지만 모든 브라우저가 모든 포맷을 지원하지는 않습니다. 따라서 여러 포맷을 제공하는 것이 좋습니다. 이를 위해 <source> 태그를 사용하여 다양한 포맷을 지정할 수 있습니다.

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    비디오를 지원하지 않는 브라우저입니다.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    오디오를 지원하지 않는 브라우저입니다.
</audio>

위의 예제에서는 <source> 태그를 사용하여 mp4와 webm 형식의 비디오, mp3와 ogg 형식의 오디오를 지원합니다. 브라우저는 지원하는 포맷을 선택하여 재생합니다.

---

이미지와 멀티미디어에 대한 설명을 마쳤습니다. 이미지, 비디오, 오디오 등을 적절하게 활용하여 풍부한 콘텐츠를 제공하는 웹 페이지를 만드는데 도움이 되기를 바랍니다. 계속해서 더 멋진 웹 페이지를 만들어보세요!