Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 임베디드 객체를 삽입하는 방법 완벽 가이드

HTML 문서에 임베디드 객체(embedded object)를 삽입하려면 <object> 태그를 사용합니다. HTML <object> 태그는 이미지, 오디오, 비디오, PDF 등 다양한 멀티미디어 콘텐츠를 HTML 문서 안에 불러올 때 활용됩니다. 또한 <param> 태그를 함께 사용하면 객체에 필요한 다양한 매개변수(parameter)를 정의할 수 있습니다.

<object> 태그의 주요 속성

HTML <object> 태그는 아래와 같은 추가 속성들을 지원합니다.

속성설명
alignleft
right
top
bottom
객체의 시각적 정렬 방식을 정의합니다.
archiveURL아카이브 파일의 URL 목록을 공백으로 구분하여 지정합니다.
border픽셀(px)객체 주위의 테두리 두께를 지정합니다.
classid클래스 IDWindows 레지스트리 또는 URL에 설정된 클래스 ID 값을 정의합니다.
codebaseURL객체 코드가 위치한 기본 경로를 지정합니다.
codetypeMIME 타입classid 속성이 참조하는 코드의 인터넷 미디어 타입을 지정합니다.
dataURL객체에서 사용할 데이터의 URL을 지정합니다.
declaredeclare필요한 시점까지 객체를 생성·인스턴스화하지 않고 선언만 하도록 정의합니다.
height픽셀(px)객체의 높이를 지정합니다.
hspace픽셀(px)객체 좌우의 수평 여백을 지정합니다.
name객체 이름객체의 고유한 이름을 지정합니다.
standby텍스트객체가 로딩되는 동안 화면에 표시할 텍스트를 정의합니다.
typeMIME 타입data 속성에 지정된 데이터의 MIME 타입을 정의합니다.
usemapURL객체와 함께 사용할 클라이언트 측 이미지 맵(client-side image map)의 URL을 지정합니다.
vspace픽셀(px)객체 상하의 수직 여백을 지정합니다.
width픽셀(px)객체의 너비를 지정합니다.

참고 사항

위 속성 중 align, border, hspace, vspace, declare, standby 등은 HTML4에서 일부 사용되었으나 HTML5에서는 더 이상 권장되지 않거나 폐기(deprecated)되었습니다. 최신 웹 개발에서는 CSS로 정렬과 여백을 조정하고, data, type, width, height, name 속성 위주로 사용하는 것이 좋습니다.

사용 예제

다음 코드를 실행하면 HTML에서 <object> 태그를 실제로 구현해 볼 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML object Tag</title>
   </head>
   <body>
      <object data = "/html/test.jpg" type = "text/html" width = "300" height = "200">
         alt : <a href = "/html/test.htm">test.jpg</a>
      </object>
   </body>
</html>

위 예제에서 data 속성은 불러올 리소스의 경로를, type 속성은 해당 리소스의 MIME 타입을 지정하며, widthheight로 객체의 크기를 조절합니다. 만약 객체를 불러오지 못하는 경우, 태그 안에 작성된 대체 콘텐츠(링크)가 대신 표시됩니다.