html-examples/doc/html5/58_이미지, 멀티미디어.md

이미지, 멀티미디어

<table>
  <tr>
    <td>
      <img src="image.jpg" alt="사진" usemap="#imagemap">
      <map name="imagemap">
        <area shape="rect" coords="0,0,50,50" href="https://example.com" alt="링크">
      </map>
    </td>
    <td>
      <video controls width="300">
        <source src="video.mp4" type="video/mp4">
        <track src="captions.vtt" kind="captions" srclang="en" label="English Captions" default>
      </video>
    </td>
    <td>
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
      </audio>
    </td>
  </tr>
</table>

• 설명: 이미지(맵 포함), 비디오(자막 포함), 오디오를 표 안에 배치.

img

속성	설명
src	이미지 파일의 URL을 지정합니다.
alt	이미지가 표시되지 않을 때 대체 텍스트를 제공합니다. (접근성 필수)
width	이미지의 너비를 픽셀 단위로 지정합니다. (CSS 권장)
height	이미지의 높이를 픽셀 단위로 지정합니다. (CSS 권장)
usemap	이미지 맵의 이름을 지정합니다. (예: usemap="#mapname")

<img src="photo.jpg" alt="풍경 사진" width="300" height="200">

• 설명: 300x200 크기의 이미지를 삽입.

map

속성	설명
name	이미지 맵의 고유 이름을 지정합니다. (img의 usemap과 연결)

area

속성	설명
shape	영역의 모양을 지정합니다. (예: rect, circle, poly)
coords	영역의 좌표를 지정합니다. (모양에 따라 다름, 예: x1,y1,x2,y2)
href	클릭 시 이동할 URL을 지정합니다.
alt	대체 텍스트를 제공합니다. (href가 있을 경우 필수)
target	링크 열기 위치를 지정합니다. (예: _blank, _self)

<img src="map.jpg" alt="지도" usemap="#mymap">
<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="https://example.com" alt="지역 1" target="_blank">
  <area shape="circle" coords="150,150,50" href="https://example2.com" alt="지역 2">
</map>

• 설명: 이미지 맵에서 사각형과 원형 영역을 정의하여 클릭 시 링크로 이동.

picture

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(min-width: 400px)">
  <img src="image-default.jpg" alt="기본 이미지">
</picture>

• 설명: 화면 크기에 따라 다른 이미지를 표시.

source

속성	설명
src	미디어 파일의 URL을 지정합니다. (audio, video에서 사용 시)
srcset	이미지 파일의 URL과 해상도를 지정합니다. (picture에서 사용 시)
media	미디어가 적용될 조건을 지정합니다. (예: (max-width: 600px))
type	리소스의 MIME 타입을 지정합니다. (예: image/webp)

audio

속성	설명
src	오디오 파일의 URL을 지정합니다.
controls	재생 컨트롤(재생, 일시정지 등)을 표시합니다. (Boolean 속성)
autoplay	페이지 로드 시 자동 재생합니다. (Boolean 속성)
loop	오디오를 반복 재생합니다. (Boolean 속성)
muted	오디오를 음소거 상태로 시작합니다. (Boolean 속성)

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

• 설명: 재생 컨트롤이 있는 오디오 삽입. source로 파일 지정.

source 태그를 사용하여 여러 포맷을 제공하면 브라우저 호환성이 높아집니다.

video

속성	설명
src	비디오 파일의 URL을 지정합니다.
controls	재생 컨트롤을 표시합니다. (Boolean 속성)
autoplay	페이지 로드 시 자동 재생합니다. (Boolean 속성)
loop	비디오를 반복 재생합니다. (Boolean 속성)
muted	비디오를 음소거 상태로 시작합니다. (Boolean 속성)
width	비디오의 너비를 픽셀 단위로 지정합니다. (CSS 권장)
height	비디오의 높이를 픽셀 단위로 지정합니다. (CSS 권장)
poster	비디오 로드 전 표시할 이미지 URL을 지정합니다.

<video controls width="400" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  브라우저가 비디오를 지원하지 않습니다.
</video>

• 설명: 400px 너비의 비디오 삽입, 썸네일 이미지와 함께.

track

속성	설명
src	자막/캡션 파일의 URL을 지정합니다. (WebVTT 형식 권장)
kind	트랙의 유형을 지정합니다. (예: subtitles, captions, descriptions)
srclang	자막의 언어를 지정합니다. (예: en, ko)
label	사용자에게 표시될 트랙의 이름을 지정합니다.
default	기본 트랙으로 설정합니다. (Boolean 속성)

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="Korean">
</video>

• 설명: 비디오에 영어(기본)와 한국어 자막 추가.