html-examples/Writerside/topics/Embed.md

Embedding

이미지

img

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

• src

• srcset

• alt

• width, height

• title

• loading

  eager | lazy

• usemap

<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> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.

<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>를 갖습니다.

<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

<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

<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">

<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

<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

<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

<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

<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">

<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>