2024-06-21

2024-06-21 14:14:35 +09:00
parent 955bf1c64c
commit 8480fa7c8f
32 changed files with 2258 additions and 19 deletions
--- a/Writerside/topics/Embed.md
+++ b/Writerside/topics/Embed.md
@@ -0,0 +1,272 @@
+# 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>
+```