2025-03-07T20:29:01

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

@@ -0,0 +1,140 @@
+# 이미지, 멀티미디어
+
+```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>
+```
+- 설명: 비디오에 영어(기본)와 한국어 자막 추가.