object element - by. UXKM

2025-05-16

요약 설명
<object> 요소는 외부 리소스(예: 이미지, 오디오, 비디오, PDF, SVG, HTML 문서 등)를 HTML 문서 안에 포괄적으로 삽입할 수 있는 시맨틱 태그로, 다양한 콘텐츠 형식을 포함할 수 있도록 설계된 범용 임베드(embed) 요소입니다.
data, type, width, height 등의 속성을 통해 삽입할 리소스의 경로와 형식을 지정하며, 콘텐츠를 불러오지 못했을 경우를 대비해 대체 콘텐츠를 내부에 작성할 수도 있습니다. <embed>보다 유연하지만, 삽입된 콘텐츠는 독립된 문서로 취급되기 때문에 CSS나 JavaScript로 내부를 직접 제어할 수 없습니다.

주요 역할 및 특징

다양한 외부 콘텐츠 삽입 가능
- PDF, 비디오, 오디오, 플래시, 다른 웹 페이지 등 다양한 파일 형식을 문서에 포함할 수 있습니다.
- MIME 타입을 지정하여 적절한 애플리케이션에서 실행되도록 할 수 있습니다.
<embed> 요소보다 유연한 기능 제공
<object> 요소 내에 대체 콘텐츠를 포함할 수 있어, 브라우저에서 지원하지 않는 경우에도 다른 콘텐츠를 보여줄 수 있습니다.
플러그인과의 호환성
<object> 요소는 플러그인 기반 콘텐츠(예: Flash, Java Applet 등)도 지원하지만, 최근에는 HTML5 표준이 권장됩니다.
폼과 연동 가능 (form 속성 지원)
<object> 요소는 <form> 요소와 함께 사용할 수 있어 폼 데이터와 연동할 수 있습니다.
HTML 요소 포함 가능
<embed> 요소와 달리 <object> 내부에 텍스트, 이미지, 링크 등 HTML 요소를 포함할 수 있습니다.
JavaScript와 연동하여 동적으로 조작 가능
<param> 요소와 함께 사용 가능
- 객체의 추가 속성을 설정할 때 <param> 요소를 함께 사용할 수 있습니다.
- 예를 들어, 비디오 자동 재생 여부, 컨트롤 표시 여부 등을 지정할 수 있습니다.

CSS 기본 값

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

							object {
								display: inline-block;
							}

기본 문법

							<object data="example.pdf" type="application/pdf" width="600" height="400">
								브라우저가 PDF를 표시할 수 없습니다.
								<a href="example.pdf">PDF 다운로드</a>
							</object>

속성

`<object>` 속성 요약

속성명
설명

data [필수]

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

포함할 콘텐츠의 MIME 유형을 지정
width / height

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

해당 <object> 요소를 포함하는 <form>을 지정
name

object 요소의 이름을 지정하여 참조 가능
usemap

이미지 맵을 사용할 경우 맵 ID를 지정

[data] 필수 <object data="파일 경로(URL)">

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

								<object data="example.pdf" type="application/pdf" width="600" height="400">
									PDF가 표시되지 않을 경우 이 텍스트가 나타납니다. <!-- 대체 콘텐츠  -->
								</object>

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

포함할 콘텐츠의 MIME 유형을 지정합니다.
data 속성과 함께 사용하면 브라우저가 파일을 적절하게 해석할 수 있도록 도와줍니다.

								<object data="example.pdf" type="application/pdf" width="600" height="400">
									PDF가 표시되지 않을 경우 이 텍스트가 나타납니다. <!-- 대체 콘텐츠  -->
								</object>

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

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

								<object data="example.pdf" width="600" height="400">
									PDF가 표시되지 않을 경우 이 텍스트가 나타납니다. <!-- 대체 콘텐츠  -->
								</object>

[form] 선택 사항 <object form="값">

<object> 요소가 특정 <form>과 연결될 때 사용됩니다.
form 속성에 폼의 id를 지정하면 해당 폼과 연관됩니다.

								<form id="myForm">
									<object data="survey.html" form="myForm"></object>
								</form>

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

<object> 요소에 이름을 지정하여 JavaScript에서 참조할 수 있도록 합니다.
window.open 등에서 참조할 때 사용됩니다.

								<object data="example.pdf" name="exampleFrame">
									PDF가 표시되지 않을 경우 이 텍스트가 나타납니다. <!-- 대체 콘텐츠  -->
								</object>

[usemap] 선택 사항 <object usemap="ID">

<object>가 이미지 맵을 사용할 경우, 해당 맵의 id를 지정합니다.

								<object data="image.svg" usemap="#map"></object>
								<map name="map">
									<area shape="rect" coords="0,0,100,100" href="https://example.com">
								</map>

예제

PDF 파일 삽입 및 JavaScript를 활용한 동적 조작

외부 웹페이지 포함

SVG(벡터 이미지) 삽입

MP4 비디오 파일 포함

주의사항

일부 브라우저에서는 <object> 요소를 완전히 지원하지 않을 수 있습니다. 특히 비디오, 오디오, 이미지 등의 경우 HTML5 요소(<video>, <audio>, <img>)를 사용하는 것이 더 안정적이며 권장됩니다.
또한, <iframe>을 사용하여 웹 페이지를 삽입하는 것이 <object>보다 더 널리 지원됩니다.
PDF, 플래시(SWF) 등 일부 콘텐츠는 브라우저에 따라 별도의 플러그인이 필요할 수 있습니다.
모바일 브라우저에서는 PDF 또는 특정 형식의 콘텐츠가 제대로 표시되지 않을 수도 있습니다.
외부 콘텐츠를 포함할 경우, 악성 코드가 포함될 위험이 있으므로 신뢰할 수 있는 출처에서만 파일을 로드해야 합니다.
XSS(Cross-Site Scripting) 공격의 위험이 있을 수 있어 주의해야 합니다.
<object> 요소는 Flash 및 Java Applet 콘텐츠를 포함할 수 있지만, 대부분의 브라우저에서는 이러한 기술을 더 이상 지원하지 않습니다.
HTML5 표준 기술로 대체하는 것이 필요합니다.