정의 및 사용 방법

<object> 태그를 사용하면
외부 리소스를 HTML 문서 안에 삽입하고, 문서 안에서 삽입된 리소스를 HTML의 객체(object)로 처리할 수 있습니다.

이 태그는 외부 리소소를 HTML 문서에 단순 삽입할 뿐만 아니라, 제어를 하기 위한 용도로 사용됩니다.

특징

  • <object>는 외부 리소스를 문서에 삽입하고, 삽입된 리소스를 문서 안에서 HTML 객체(object)로 처리할 수 있는 컨테이너용 태그입니다.
  • 초기 웹 환경에서 브라우저가 외부 콘텐츠를 직접 처리하기 어려웠을 때, 플러그인이나 외부 애플리케이션이 필요한 콘텐츠(예: 어도비 플래시, 비디오, 오디오 등)를 단순 삽입할 뿐만 아니라, 제어를 하기 위한 용도로 사용되었습니다.
  • HTML5 이후 브라우저가 자체적으로 비디오, 오디오 등을 지원하고 보편화되면서, 이 태그의 사용 필요성은 현저히 줄었으며, 제한적으로만 사용됩니다.
  • 그러나 여전히 PDF 문서, 비디오, 오디오 등 다양한 외부 콘텐츠를 삽입시키고 제어하는 용도로 사용될 수 있습니다.

기본 예제

<object> 태그는 지정된 data 속성을 통해 이미지, 미디어 파일 등 다양한 형식의 외부 콘텐츠를 웹 문서에 포함시키고 활성화할 수 있습니다. 다음은 그 예시입니다.

이미지 삽입

HTML 
<object data="flower.jpg" width="200" height="130"></object>
브라우저에서 실제 표시된 모습

비디오 삽입

HTML 
<object data="flower.mp4" width="200"></object>
브라우저에서 실제 표시된 모습

관련 속성

<object> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

object 태그의 관련 속성
속성간략 설명
data 삽입하려는 리소스의 경로(URL)를 지정합니다.
type 선택적으로 type 속성을 사용하여 리소스의 미디어(MIME) 타입을 명시할 수 있습니다.
width 비디오의 너비를 픽셀(px) 단위로 지정합니다.
height 비디오의 높이를 픽셀(px) 단위로 지정합니다.
name <object>에 이름을 부여하여, 스크립트에서 해당 요소를 참조하거나 폼 전송 시 사용합니다.
form <object>를 특정 <form>과 연결할 때 연결할 <form>의 id 값입니다.

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

  • archive
  • border
  • classid
  • codebase
  • codetype
  • declare
  • standby
  • tabindex
  • typemustmatch
  • usemap

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다. 구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

data 속성

삽입하려는 리소스의 경로(URL)를 지정합니다.
이 속성은 필수 속성이며, 실제로 삽입할 파일의 경로를 지정해야 합니다. 예를 들어, 이미지나 비디오, PDF 파일 등의 경로를 지정합니다.

HTML 
<object data="flower.jpg"></object>
<object data="flower.mp4"></object>

type 속성

선택적으로 이 속성을 사용하여 리소스의 미디어(MIME) 타입을 명시할 수 있습니다.

HTML 
<object data="flower.jpg" type="image/jpeg"></object>
<object data="flower.mp4" type="video/mp4"></object>

미디어(MIME) 타입 목록을 참고하세요.

  • type 속성은 <object>가 과거 플러그인 기반 콘텐츠를 처리할 때 브라우저에게 어떤 플러그인을 사용해야 할지 알려주는 핵심적인 역할을 했습니다.
  • 현재는 브라우저가 src로 지정된 파일의 확장자나 서버 응답을 통해 MIME 타입을 유추할 수 있어 type 속성이 필수는 아니지만, 명시적으로 지정하면 브라우저가 콘텐츠를 더 빠르고 정확하게 인식하고 렌더링(활성화)할 수 있습니다.

width 속성

삽입되는 리소스의 너비를 픽셀(px) 단위로 지정합니다. 백분율(%)을 사용할 수 없습니다.
픽셀 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

이 속성을 생략하면 브라우저가 콘텐츠에 따라 기본 크기를 자동으로 결정합니다.

HTML 
<object data="flower.mp4"></object>
<object data="flower.mp4" width="200"></object>
<object data="flower.mp4" width="200" height="150"></object>

height 속성

삽입되는 리소스의 높이를 픽셀(px) 단위로 지정합니다. 백분율(%)을 사용할 수 없습니다.
픽셀 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

이 속성을 생략하면 브라우저가 콘텐츠에 따라 기본 크기를 자동으로 결정합니다.

HTML 
<object data="flower.mp4"></object>
<object data="flower.mp4" height="150"></object>
<object data="flower.mp4" width="200" height="150"></object>

name 속성

<object>에 이름을 부여하여, 스크립트에서 해당 요소를 참조하거나 폼 전송 시 사용합니다.

HTML 
<object data="flower.mp4" name="flower-video"></object>

form 속성

<object>를 특정 <form>과 연결할 때 연결할 <form>의 id 값입니다.

HTML 이 <object>는 물리적으로 <form> 밖에 있지만, form 속성 덕분에 my-data-form을 id로 갖는 <form>의 일부입니다. 
<object data="flower.mp4" name="flower-video" form="my-data-form"></object>
<!-- .... -->
<form id="my-data-form" action="/submit-data" method="POST">
    <label for="username">이름:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="데이터 제출">
</form>

고려할 점

<object> 태그를 사용할 때는 다음 사항들을 함께 고려해야 합니다.

외부 플러그인 지원 여부

<object> 태그는 초창기 웹 환경에서 브라우저의 기능이 제한적이던 시절, 외부 애플리케이션이나 플러그인이 필요한 콘텐츠(예: 어도비 플래시, PDF, 비디오, 오디오 등)를 문서에 삽입하여 제어하기 위해 고안되었습니다.

그러나 현대의 브라우저는 대부분 이러한 외부 플러그인을 지원하지 않습니다.
보안상의 이유와 함께 브라우저 자체가 미디어 재생 및 렌더링 기능을 내장하게 되었기 때문입니다. 현재는 PDF 문서와 같은 일부 예외를 제외하고는 대부분의 플러그인 기반 콘텐츠가 더 이상 지원되지 않습니다.

더 이상 지원되지 않는 대표적인 예
  • Java Applets 및 관련 플러그인
  • ActiveX 컨트롤
  • 어도비 플래시(Adobe Flash)

언급된 것 이외에도 브라우저 보안 정책으로 인해 외부 플러그인 사용을 위해 <object> 태그를 사용하는 것은 바람직하지 않습니다.

더 적절한 태그의 사용 확인

<object> 태그는 외부 콘텐츠를 단순 삽입할 뿐만 아니라, 제어를 하기 위한 용도로 사용됩니다. 현대의 브라우저는 비디오, 오디오 등의 미디어를 자체적으로 지원하고 내장 기능이 풍부해졌기 때문에, 이러한 콘텐츠를 <object>로 삽입하는 것은 더 이상 바람직하지 않습니다.

더 적절한 태그의 제안
  • 이미지 파일을 삽입하려면, <picture>나 <img> 태그를 사용하세요. 의미론적 측면이나 반응형 스타일을 다룰 때 더 적절합니다.
  • 비디오나 오디오 콘텐츠를 삽입하려면 <video>나 <audio> 태그를 사용하세요. 의미론적 측면뿐만 아니라, 자막, 컨트롤 UI, 자동 재생 등 미디어 전용 속성과 기능을 제공하여 훨씬 유연하게 제어할 수 있습니다.

기술적인 문법 요약

object 태그의 기술적인 문법 요약
허용되는 부모 요소 외부 리소스 삽입을 허용하는 모든 요소
암시적인 role 속성 값 없음
허용된 role 속성 값 application, document, img

브라우저 호환성

object 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<object> 1 12 1 3

명세서

object 태그의 명세서 사양
명세서 사양
<object> HTML
#the-object-element

참고문헌

같이 보기