개발 도구 (Development Tools)/HTML & CSS

#11. HTML 미디어 요소

BiCute 2023. 3. 27. 08:00
반응형

 

HTML의 미디어 요소는 웹사이트에 미디어 콘텐츠(오디오, 비디오, 이미지 등)를 삽입하는데 사용됩니다.

  • <audio> 요소는 웹사이트에 오디오 파일을 삽입하는데 사용됩니다.
  • <video> 요소는 웹사이트에 비디오 파일을 삽입하는데 사용됩니다.
  • <img> 요소는 웹사이트에 이미지 파일을 삽입하는데 사용됩니다.
  • <picture> 요소는 다양한 크기와 화질의 이미지를 표시할 수 있는 유연성을 제공합니다.
  • <figure> 요소는 미디어 요소와 관련된 설명 텍스트를 그룹으로 묶어주는데 사용됩니다.

위의 요소들은 미디어 소스를 지정하고, 컨트롤러(재생, 정지, 볼륨 등)를 제공하는 등의 추가적인 속성을 가질 수 있습니다.

 

 

 

# Audio

 

<audio> 태그는 HTML5에서 추가된 미디어 요소 중 하나로, 웹사이트에 오디오 파일을 삽입하는데 사용됩니다.

다음은 <audio> 태그의 기본 구조입니다.

<audio controls>
  <source src="youraudiofile.mp3" type="audio/mpeg">
  접속한 브라우저는 오디오 요소를 지원하지 않습니다.
</audio>
  • controls 속성은 오디오 컨트롤러(재생, 정지, 볼륨 등)를 표시하는데 사용됩니다.
  • <source> 태그는 <audio> 태그의 소스 오디오 파일을 지정합니다. src 속성은 파일의 URL을, type 속성은 오디오 파일의 MIME 타입을 지정합니다.
  • 사용자가 <audio> 태그를 지원하지 않는 브라우저에서는 "접속한 브라우저는 오디오 요소를 지원하지 않습니다."라는 메시지가 표시됩니다.

<audio> 태그는 추가적인 속성도 가질 수 있습니다.

 

아래는 <audio> 태그에 autoplayloop 속성을 추가한 예제입니다.

<audio controls autoplay loop>
  <source src="youraudiofile.mp3" type="audio/mpeg">
  접속한 브라우저는 오디오 요소를 지원하지 않습니다.
</audio>

 

  • autoplay 속성은 페이지가 로드되자마자 오디오 파일이 자동으로 재생되도록 합니다.
  • loop 속성은 오디오 파일이 종료되면 다시 처음부터 재생되도록 합니다.

이 외에도 <audio> 태그는 많은 속성들이 있습니다.

참고: HTML Audio and Video DOM Reference

 

 

 

# Video

 

HTML에서는 <video> 태그를 사용하여 비디오 파일을 재생할 수 있습니다.

<video> 태그는 다음과 같이 작성할 수 있습니다.

<video controls>
  <source src="yourvideofile.mp4" type="video/mp4">
  접속한 브라우저는 비디오 요소를 지원하지 않습니다.
</video>
  • src 속성은 비디오 파일의 URL을 지정합니다.
  • type 속성은 비디오 파일의 MIME 타입을 지정합니다.
  • controls 속성은 비디오 컨트롤바(재생, 정지, 볼륨 등)을 보여줍니다.

추가적인 속성으로는 autoplay, loop, width, height, poster 등이 있습니다.

 

<video controls autoplay loop width="500" height="300" poster="yourposterimage.jpg">
  <source src="yourvideofile.mp4" type="video/mp4">
  <source src="yourvideofile.webm" type="video/webm">
  접속한 브라우저는 비디오 요소를 지원하지 않습니다.
</video>
  • autoplay 속성은 페이지가 로드되자마자 비디오 파일이 자동으로 재생되도록 합니다.
  • loop 속성은 비디오 파일이 종료되면 다시 처음부터 재생되도록 합니다.
  • widthheight 속성은 비디오 요소의 크기를 지정합니다.
  • poster 속성은 비디오가 로드되기 전에 표시되는 이미지를 지정합니다.

위의 예제에서 source 태그는 브라우저가 지원하는 비디오 형식을 지정합니다.

source 태그는 src 속성으로 비디오 파일의 URL을, type 속성으로 MIME 타입을 지정합니다.

<video> 태그의 속성은 브라우저에 따라 지원 여부가 다르므로, 모든 브라우저에서 제대로 동작할 수 있도록 적절한 속성과 태그를 사용하는 것이 좋습니다.

 

 

 

# Embed

 

<embed> 태그는 미디어 파일을 웹페이지에 포함시키는데 사용됩니다.

이 태그는 주로 플래시 콘텐츠 또는 기타 플러그인 기반 미디어를 포함하는 데 사용됩니다.

 

<embed src="yourmediafile.swf" width="500" height="300">

위의 예제에서 src 속성은 미디어 파일의 URL을 지정하고, widthheight 속성은 포함된 미디어의 너비와 높이를 지정합니다.

<embed> 태그는 구형 브라우저에서 종종 사용되었지만, 현재는 HTML5의 <video> 태그와 같은 미디어 요소를 사용하는 것이 좋습니다.

모든 브라우저에서 표준적으로 지원되는 기술을 사용하면 더욱 안정적으로 미디어를 표시할 수 있습니다.

 

 

 

# Picture

 

HTML5의 picture 요소는 이미지 렌더링을 제어하는데 사용되며, 다양한 디바이스에서의 최적의 이미지 표시를 가능하게 합니다.

 

picture 요소는 source 요소와 같이 사용합니다.

source 요소는 특정 디바이스 또는 브라우저에 맞는 이미지 경로를 제공합니다.

img 요소는 사용자 에이전트가 결정한 적절한 이미지를 나타냅니다.

 

아래는 picture 요소의 예입니다:

<picture>
  <source media="(max-width: 700px)" srcset="small.jpg">
  <source media="(min-width: 701px)" srcset="large.jpg">
  <img src="default.jpg" alt="디폴트 이미지">
</picture>

위 코드는 만약 디바이스의 폭이 700px 보다 작다면 small.jpg가 렌더링되고, 701px 보다 크다면 large.jpg가 렌더링됩니다.

디바이스에서 어떤 이미지도 선택되지 않는 경우에는 default.jpg가 렌더링됩니다.

 

 

 

# Figure

 

figure 요소는 HTML5에서 이미지, 그래픽, 코드 등의 그룹을 표시하는데 사용되는 요소입니다.

figure 요소는 일반적으로 페이지의 본문에 포함되며, 정보적으로 중요하지 않은 요소입니다.

figure 요소의 안에는 img 또는 기타 요소, 예를 들어 figcaption 요소를 포함할 수 있습니다.

figcaption 요소는 figure 요소에 대한 설명을 포함할 수 있습니다.

아래는 figure 요소의 예입니다:

<figure>
  <img src="image.jpg" alt="이미지 설명">
  <figcaption>이미지에 대한 설명</figcaption>
</figure>
반응형