HTML <embed> 태그 완벽 정리 – 외부 콘텐츠 삽입 방법과 주요 속성

HTML <embed> 태그란?

HTML의 <embed> 태그는 문서 안에 외부 애플리케이션이나 플러그인 기반 콘텐츠를 삽입할 때 사용하는 요소입니다. PDF 문서, 동영상, 오디오, 플래시(Flash) 파일 등 다양한 외부 리소스를 웹 페이지에 직접 표시할 수 있습니다.

<embed> 태그는 닫는 태그가 없는 빈 요소(empty element)이며, 브라우저에 외부 콘텐츠를 처리할 수 있는 플러그인이나 모듈이 있을 경우 해당 콘텐츠를 화면에 렌더링합니다.

<embed> 태그의 주요 속성

height: 삽입된 콘텐츠의 세로 크기를 픽셀 단위로 지정합니다.
src: 삽입할 외부 파일의 URL 주소를 지정합니다. 이 속성은 필수입니다.
type: 삽입되는 콘텐츠의 미디어 타입(MIME 타입)을 지정합니다. 예를 들어 application/pdf, video/mp4 등이 있습니다.
width: 삽입된 콘텐츠의 가로 크기를 픽셀 단위로 지정합니다.

<embed> 태그 사용 예제

다음 예제는 HTML에서 <embed> 태그를 사용하여 외부 애플리케이션을 불러오는 방법을 보여줍니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h2>CSS Demonstrating Application</h2>
    <embed src="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600">
</body>
</html>

출력 결과

HTML embed 태그 완벽 정리 – 외부 콘텐츠 삽입 방법과 주요 속성

예제 코드 상세 설명

위 예제에서는 <embed> 요소를 다음과 같이 사용했습니다.

<embed src="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600">

src 속성에는 삽입하려는 외부 애플리케이션 파일(.swf)의 URL을 지정했습니다.

https://www.tutorialspoint.com/flex/samples/CSSApplication.swf

또한 height와 width 속성을 각각 400px, 600px로 설정하여 콘텐츠가 화면에 표시되는 크기를 조절했습니다.

참고: 플래시(SWF) 지원 종료 안내

예제에 사용된 .swf 파일은 어도비 플래시(Adobe Flash) 형식입니다. 플래시는 2020년 12월 31일부로 공식 지원이 종료되었으며, 현재 대부분의 최신 브라우저에서는 SWF 콘텐츠를 재생할 수 없습니다. 따라서 실무에서는 <embed> 태그를 활용해 PDF 문서나 MP4 동영상 등 여전히 지원되는 콘텐츠를 삽입하는 방식으로 활용하는 것이 좋습니다.