# 이미지, 멀티미디어

```html
<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"`) |

```html
<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`) |

```html
<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
```html
<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 속성) |

```html
<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을 지정합니다. |

```html
<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 속성) |

```html
<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>
```
- 설명: 비디오에 영어(기본)와 한국어 자막 추가.