embed element - by. UXKM

2025-05-16

요약 설명
<embed> 요소는 외부 리소스(예: 멀티미디어, 플러그인 기반 콘텐츠, SVG, PDF 등)를 현재 HTML 문서 내에 직접 삽입(embed)할 때 사용하는 비시맨틱 태그 입니다.
src 속성으로 삽입할 파일 경로를 지정하며, type, width, height 등의 속성으로 컨텐츠의 형식과 표시 크기를 정의할 수 있습니다. <iframe>이나 <object>와 유사하지만, 상대적으로 간단하고 제한적인 제어만 가능하며, 삽입된 콘텐츠는 독립적인 외부 리소스로 동작하므로 CSS나 JavaScript로 내부 내용을 직접 제어할 수는 없습니다.

주요 역할 및 특징

외부 콘텐츠 임베딩(Embedding)
<embed> 요소는 PDF, SWF(플래시), 오디오, 비디오, 다른 웹페이지 등 다양한 콘텐츠를 포함할 수 있습니다.
별도의 플러그인 또는 브라우저 지원 필요
일부 콘텐츠는 브라우저에서 기본적으로 지원하지 않을 수 있으며, 플러그인(예: Adobe Flash, PDF Viewer)이 필요할 수 있습니다.
독립적인 컨텐츠 표시
<iframe>과 유사하지만, HTML 문서를 포함하는 용도보다는 미디어 콘텐츠를 직접 표시하는 데 특화되어 있습니다.
자동 렌더링
- 외부 파일을 직접 삽입하여, 별도의 파일 로드 없이 브라우저 내에서 자동으로 콘텐츠를 렌더링합니다.
- 브라우저에서 지원하는 콘텐츠 형식에 따라 렌더링되며, 형식이 맞지 않으면 빈 공간이 표시될 수 있습니다.
웹 표준과의 호환성
- HTML5에서 <embed> 요소는 웹 표준에 맞게 기존 플러그인 사용을 대체할 수 있습니다.
- 특히 비디오와 오디오 형식은 <embed> 요소 대신 <video>, <audio> 요소로 대체할 수 있습니다.
CSS 및 JavaScript와 연동 가능
CSS로 크기 조정이 가능하며, JavaScript로 동적으로 컨트롤할 수 있습니다.

CSS 기본 값

<embed> 요소는 기본적으로 인라인 블록 레벨 요소입니다.

							embed {
								display: inline-block;
							}

기본 문법

							<embed src="example.pdf" type="application/pdf" width="600" height="400"> <!-- embed -->

속성

`<embed>` 속성 요약

속성명
설명

src [필수]

포함할 외부 콘텐츠의 URL을 지정
type

콘텐츠의 MIME 타입을 지정
width / height

콘텐츠의 너비 / 높이를 지정
align

콘텐츠의 정렬 방식을 지정 (HTML5에서는 비권장)
name

객체의 이름을 지정하여 window.open 등에서 참조 가능

[src] 필수 <embed src="파일 경로(URL)">

<embed> 요소가 포함할 외부 콘텐츠의 URL을 지정합니다.
src 속성이 없으면 embed는 아무것도 표시하지 않습니다.

								<embed src="example.pdf" width="600" height="400">

[type] 선택 사항 <embed type="값">

포함할 콘텐츠의 MIME 유형을 지정합니다. 브라우저가 파일 형식을 올바르게 해석하도록 도와줍니다.

								<embed src="example.pdf" type="application/pdf" width="600" height="400"> <!-- type -->

[width / height] 선택 사항 <embed width="값" height="값">

포함된 콘텐츠의 너비 / 높이를 지정합니다. 단위(px)를 생략하면 픽셀(px)로 자동 해석됩니다.

								<embed src="example.pdf" width="800" height="600">

[align] 선택 사항 - HTML5에서 비권장 <embed align="값">

콘텐츠를 주변 요소와 정렬하는 속성입니다.
HTML5에서는 더 이상 사용되지 않으며, 대신 CSS의 float 또는 text-align을 사용해야 합니다.

사용 가능한 값 :: left; right; top; bottom; middle

								<embed src="example.mp3" align="right">

[name] 선택 사항 <embed name="값">

<embed> 요소에 이름을 지정하여 window.open 등에서 참조할 수 있도록 합니다. 여러 개의 <embed> 요소를 제어할 때 유용합니다.

								<embed src="video.mp4" name="videoPlayer" width="600" height="400">

예제

PDF 파일 삽입 및 미리보기

외부 웹페이지 포함

SVG(벡터 이미지) 삽입

MP4 비디오 파일 포함

주의사항

<embed> 요소는 일부 콘텐츠(예: Flash, Java Applet)에서 보안 이슈로 인해 최신 브라우저에서 제한될 수 있습니다.
모든 브라우저가 모든 type 속성을 지원하지 않으므로, 필요하면 대체 콘텐츠(<iframe> 등)를 고려해야 합니다.
모바일 브라우저에서는 PDF나 비디오 삽입이 제한될 수 있으며, 별도의 뷰어 앱이 필요할 수도 있습니다.
<audio>, <video>, <iframe> 등의 사용을 권장합니다. 특히 플러그인 기반 콘텐츠는 점차 HTML5 표준을 따르는 미디어 요소로 대체되고 있습니다.