272 lines
6.1 KiB
Markdown
272 lines
6.1 KiB
Markdown
# 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>
|
|
``` |