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

컨텐트 삽입

embed

속성	설명
src	삽입할 리소스의 URL을 지정합니다.
type	리소스의 MIME 타입을 지정합니다. (예: application/x-shockwave-flash)
width	너비를 픽셀 단위로 지정합니다. (CSS 권장)
height	높이를 픽셀 단위로 지정합니다. (CSS 권장)

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

<iframe src="https://example.com" width="400" height="300" sandbox="allow-scripts"></iframe>

• 설명: 외부 웹페이지를 삽입하며 스크립트 실행 허용.

object

속성	설명
data	삽입할 리소스의 URL을 지정합니다.
type	리소스의 MIME 타입을 지정합니다.
width	너비를 픽셀 단위로 지정합니다. (CSS 권장)
height	높이를 픽셀 단위로 지정합니다. (CSS 권장)

<object data="document.pdf" type="application/pdf" width="500" height="600">
  PDF를 표시할 수 없습니다.
</object>

• 설명: PDF 문서를 삽입하고 대체 텍스트 제공.

portal

속성	설명
src	전환할 페이지의 URL을 지정합니다.

<portal src="https://example.com"></portal>

• 설명: 다른 페이지로의 전환 제공 (현재 지원 제한적).

canvas

속성	설명
width	캔버스의 너비를 픽셀 단위로 지정합니다. (기본값: 300)
height	캔버스의 높이를 픽셀 단위로 지정합니다. (기본값: 150)

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

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

• 설명: 빨간색 원을 그린 SVG 그래픽.

math

<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²" 수식 표현.