2025-03-07T20:29:01

doc/html5/59_컨텐트 삽입.md

@@ -0,0 +1,98 @@
+# 컨텐트 삽입
+
+## embed
+| **속성** | **설명** |
+|---|----|
+| `src` | 삽입할 리소스의 URL을 지정합니다. |
+| `type` | 리소스의 MIME 타입을 지정합니다. (예: `application/x-shockwave-flash`) |
+| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
+| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
+
+```html
+<embed type="video/mp4" src="movie.mp4" width="300" height="200">
+```
+- 설명: MP4 비디오를 삽입.
+
+## iframe
+| **속성** | **설명** |
+|---|----|
+| `src` | 삽입할 문서의 URL을 지정합니다. |
+| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
+| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
+| `name` | iframe의 이름을 지정합니다. (링크 타겟으로 사용 가능) |
+| `sandbox` | 보안 제한을 적용합니다. (예: `allow-scripts`, `allow-forms`) |
+
+```html
+<iframe src="https://example.com" width="400" height="300" sandbox="allow-scripts"></iframe>
+```
+- 설명: 외부 웹페이지를 삽입하며 스크립트 실행 허용.
+
+## object
+| **속성** | **설명** |
+|---|----|
+| `data` | 삽입할 리소스의 URL을 지정합니다. |
+| `type` | 리소스의 MIME 타입을 지정합니다. |
+| `width` | 너비를 픽셀 단위로 지정합니다. (CSS 권장) |
+| `height` | 높이를 픽셀 단위로 지정합니다. (CSS 권장) |
+
+```html
+<object data="document.pdf" type="application/pdf" width="500" height="600">
+  PDF를 표시할 수 없습니다.
+</object>
+```
+- 설명: PDF 문서를 삽입하고 대체 텍스트 제공.
+
+
+## portal
+| **속성** | **설명** |
+|---|----|
+| `src` | 전환할 페이지의 URL을 지정합니다. |
+
+```html
+<portal src="https://example.com"></portal>
+```
+- 설명: 다른 페이지로의 전환 제공 (현재 지원 제한적).
+
+## canvas
+| **속성** | **설명** |
+|---|----|
+| `width` | 캔버스의 너비를 픽셀 단위로 지정합니다. (기본값: 300) |
+| `height` | 캔버스의 높이를 픽셀 단위로 지정합니다. (기본값: 150) |
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+<script>
+  const canvas = document.getElementById("myCanvas");
+  const ctx = canvas.getContext("2d");
+  ctx.fillRect(50, 25, 100, 50);
+</script>
+```
+- 설명: JavaScript로 사각형을 그림.
+
+## svg
+| **속성** | **설명** |
+|---|----|
+| `width` | SVG의 너비를 지정합니다. |
+| `height` | SVG의 높이를 지정합니다. |
+| `viewBox` | 표시 영역을 정의합니다. (예: `0 0 100 100`) |
+
+```html
+<svg width="100" height="100">
+  <circle cx="50" cy="50" r="40" fill="red" />
+</svg>
+```
+- 설명: 빨간색 원을 그린 SVG 그래픽.
+
+## math
+```html
+<math>
+  <mrow>
+    <msup><mi>x</mi><mn>2</mn></msup>
+    <mo>+</mo>
+    <msup><mi>y</mi><mn>2</mn></msup>
+  </mrow>
+</math>
+```
+- 설명: MathML로 "x² + y²" 수식 표현.
+
+