99 lines
2.8 KiB
Markdown
99 lines
2.8 KiB
Markdown
# 컨텐트 삽입
|
|
|
|
## 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²" 수식 표현.
|
|
|
|
|