[HTML] 멀티미디어 태그

HTML5는 멀티미디어 데이터를 웹 문서에 포함하여 사용할 수 있는 임베디드 콘텐츠 태그를 정의하였다. 다음 표는 임베디드 콘텐츠 태그를 정리한 것이다.

태그	설명
<img>	이미지 파일 삽입
<canvas>	그래픽 그리기
<audio>	오디오 파일 삽입
<video>	동영상 파일 삽입
<track>	미디어 요소 트랙 삽입
<source>	미디어 소스 삽입
<embed>	개체 삽입

 

멀티미디어 파일을 웹 문서에 삽입할 때는 반드시 웹 문서와 같은 폴더에 있어야 한다. 만약 같은 폴더에 있지 않다면 파일이 저장된 경로, 즉 절대 경로를 모두 입력해야 한다.

 

이미지

HTML5에서 사용하는 대표적인 이미지 파일 종류로는 GIF, JPG, PNG 등이 있다. 이미지 파일들은 각각 장단점이 있기 때문에 용도에 맞게 사용해야 한다.

 

<img> 태그

웹 문서에 이미지를 삽입할 때 사용한다.

<img src="경로" [속성="값"]>

 

<img> 태그의 속성

• src : 이미지 파일이 저장된 경로를 지정한다.
• alt : 이미지를 웹 브라우저에 표시하지 못했을 경우 대체 텍스트를 지정한다.
• width, height : 이미지의 너비와 높이를 조정한다.

 

<figure>, <figcaption> 태그

이미지에 설명글을 붙일 수 있는 태그이다. 이 태그는 비단 이미지뿐만 아니라 도표, 그래프, 동영상 등에도 사용할 수 있다.

<figure>
	<img src="경로" alt="설명">
    <figcaption>이미지 설명</figcaption>
</figure>

 

출력 결과

 

오디오

HTML5에서 사용하는 대표적인 오디오 파일의 종류에는 MP3, OGG, WAV 등이 있다.

 

<audio> 태그

웹 페이지에 오디오 파일을 삽입하는 태그이다.

<audio src="경로" [속성="값"]></audio>

 

<audio> 태그의 속성

• src : 재생할 오디오 파일이 저장된 경로를 표시한다.
• controls : 재생 제어기를 표시한다.
• loop : 반복 재생한다.
• autoplay : 웹 문서가 열림과 동시에 자동으로 재생한다.
• muted :  음소거 상태로 시작한다.
• preload : 오디오 파일 사용 여부와 상관없이 미리 다운로드한다. 웹 문서가 열림과 동시에 다운로드하기 때문에 필요할 때 오디오 파일을 빠르게 재생할 수 있다.

 

비디오

<video> 태그

비디오 파일을 웹 페이지에 삽입할 때는 <video> 태그를 사용하며 controls 속성을 이용하여 동영상 제어기를 표시한다.

 

<video> 태그의 속성

• src : 재생할 비디오 파일이 저장된 경로를 표시한다.
• controls : 재생 제어기를 표시한다.
• width, height : 비디오의 가로/세로 크기를 설정한다.
• loop : 반복 재생한다.
• autoplay : 웹 문서가 열림과 동시에 자동으로 재생한다.
• muted :  음소거 상태로 시작한다.
• preload : 비디오 파일 사용 여부와 상관없이 미리 다운로드한다. 웹 문서가 열림과 동시에 다운로드하기 때문에 필요할 때 비디오 파일을 빠르게 재생할 수 있다.
• poster : 비디오 파일이 재생되기 전이나 다운로드되지 않고 있는 경우 표시될 이미지의 URL을 표시한다.

 

개체 삽입

이미지, 오디오, 비디오 이외에 웹 문서에 많이 삽입하는 개체로 PDF 파일과 플래시 파일 등이 있다. 개체 삽입 태그는 이러한 개체를 삽입하기 위한 태그이다. 개체 삽입 태그의 종류에는 <object> 태그와 <embed> 태그가 있다. 두 태그 중 <embed> 태그는 모든 웹 브라우저에서 지원하고 있기 때문에 가능하면 <embed> 태그를 사용할 것을 권장한다.

<embed src="경로">