# Embedding

## 이미지

### img

문서에 이미지를 넣습니다.

- src

- srcset

- alt

- width, height

- title

- loading

  eager | lazy

- usemap


```html
<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">
```

### figure

이미지와 캡션을 하나로 묶을 때 사용합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다.

### figcaption

부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.

```html
<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
```

### picture

장치나 화면 크기에 따라 여러 소스 중 하나의 이미지를 사용하고자할 때 사용합니다. ```<picture>```는 여러 개의 ```<source>```와 하나의 ```<img>```를 갖습니다.

```html
<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" type="image/png">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>
```

### map

`<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.

### area

이미지의 핫스팟 영역을 정의하고, 하이퍼링크를 추가할 수 있습니다. ```<map>```안에서만 사용됩니다.

- shape
- coords
- href
- alt

```html
<map name="infographic">
    <area shape="rect" coords="184,6,253,27"
          href="https://mozilla.org"
          target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/"
          target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
          target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
          href="https://developer.mozilla.org/docs/Web/API"
          target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
```

### SVG

```html
<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
```

```html
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>
```

## 비디오 / 오디오

### video

비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.

- src

- height

- width

- controls

- autoplay

- loop

- muted

- poster

- currentTime


- source

    - src
    - srcset
    - type
- track

  미디어 요소(`<audio>`, `<video>`)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.

    - src

    - srclang

    - label

    - default

    - kind

      subtitles | captions | descriptions | chapters | metadata


```html
<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
```

### audio

문서에 소리 콘텐츠를 포함할 때 사용합니다.

- src
- autoplay
- controls
- currentTime
- loop

```html
<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
```

## 캔버스

### canvas

캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.

- width, height

## 프레임

### iframe

중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.

- allowfullscreen
- frameborder
- src
- width
- height

```html
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>
```

## 그 외 객체

### embed

외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.

- src
- type
- width, height

### object

이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.

- data
- type
- width, height

### ~~param~~

`<object>`의 매개 변수를 정의합니다.

- name
- value

```html
<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">
```

```html
<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can 
    <a href="mypdf.pdf">download the PDF file.
    </a>
  </p>
</object>
```