이미지 및 멀티미디어 콘텐츠를 삽입하는 HTML 작성법

 

소개

이미지 및 멀티미디어 콘텐츠 삽입을 위한 태그(Image and multimedia Elements)는 이미지, 오디오, 비디오와 같은 다양한 멀티미디어 리소스를 지원하며, 멀티미디어 접근성을 보장합니다.

 

 

이미지 및 멀티미디어 콘텐츠를 위한 HTML 작성법

<img> 태그

<img> 태그는 문서의 이미지를 나타냅니다. <img> 태그는 필수 속성으로 src을 가지며, src 속성은 이미지의 경로(URL)을 나타냅니다. alt속성은 이미지를 설명하는 대체 텍스트를 정의합니다.

alt 속성은 이미지 URL이 잘못되었거나 브라우저내 지원되는 형식이 아닌 경우 이미지를 대체하여 보여줄 텍스트이며,
이는 웹페에지 내 이미지를 직접적으로 볼 수 없는 사용자 혹은 봇에 이미지에 대한 정보를 제공해주는 역할을 수행합니다.

<img src="URL" alt="대체 텍스트" >

 

<map> 태그

<map> 태그는 <area> 태그와 함께 사용되어 이미지 맵(클릭 가능한 링크 영역)을 정의합니다. name속성은 참조 할 수 있도록 맵에 이름을 부여하며, 속성은 반드시 존재해야하며 공백이없는 비어 있지 않은 값을 가져야합니다. name속성의 값은 같은 문서 내의 다른 map엘리먼트의 name속성 값과 일치하지 않아야합니다.

<img src="URL" alt="대체 텍스트" usemap="map이름">
<map name="map이름">
  <area shape="circle" coords="75,75,75" href="#">
  <area shape="circle" coords="75,75,75" href="#">
</map>

 

 

<video> 태그

<video> 태그는 문서에 비디오를 삽입합니다. <video> 태그는 하나 이상의 비디오 소스를 포함해야 하며, 비디오 소스를 지정하려면 src특성 또는 <source>태그를 사용하며, 브라우저가 가장 적합한 것을 선택합니다.

속성으로는 'autoplay', 'buffered', 'controls', 'muted', 'played', 'preload', 'src' 등이 있습니다.

<video src="URL" autoplay poster="./poster.jpg"></video>

<video controls poster="./poster.jpg">
  <source src="동영상 경로" type="video/mp4">
  <source src="동영상 경로" type="video/ogg">
</video>

 

<audio> 태그

<audio> 요소는 사운드를 문서에 삽입합니다. <video> 태그와 마찬가지로 src속성 또는 <source>태그를 사용하여 표현 된 하나 이상의 오디오 소스를 포함 할 수 있습니다.

속성으로는 'autoplay', 'autobuffer', 'bufferd', 'controls', 'played', 'preload', 'src', 'volume' 등이 있습니다.

<audio src="URL" autoplay></audio>

<audio controls>
  <source src="오디오 경로" type="audio/wav">
</audio>

 

<track> 태그

<track> 태그는 <audio> 및 <video> 미디어 요소의 하위 요소로 사용됩니다. 자막을 자동으로 처리하는 등 시간 지정 텍스트 트랙(또는 시간 기반 데이터)을 지정할 수 있습니다. 트랙은 WebVTT 형식 (.vtt 파일) - 웹 비디오 텍스트 트랙으로 형식이 지정됩니다. <track> 태그는 kind 속성을 통해 트랙을 지정하며, 기본값은 'subtitles' 입니다.

<video autoplay controls poster="./poster.jpg">
  <source src="비디오 경로" type="video/ogg">
  <source src="비디오 경로" type="video/mp4">
  <track kind="captions" src="sampleCaption.vtt" srclang="ko">
  <track kind="subtitles" src="sampleSubtitles_ko.vtt" srclang="ko">
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
</video>