html<object>태그 정리
지난 시간엔 <iframe>에 대해 다뤘는데요
오늘 배울 <object>태그 역시 <iframe>과 비슷합니다.
정리하다 보니 어려운 부분이 있어, 설명이 더 필요한 부분은 나중에 더 추가하도록 하겠습니다.
<object>태그는 html 문서 안에 또 다른 html 문서를 삽입할 수도 있고,
audio, video, pdf파일이나 플러그인(Java applets, Flash등)을 넣을 수도 있어요.
하지만 <object>태그는 퇴화 태그로 간주되어,
<iframe>을 사용할 수 없는 상황에서만 사용을 권장하고 있습니다.
▶<iframe>과 <object> 태그 차이는?
iframe은 플레이어를 담고 있는 하나의 창이라고 보면 됨.
사용자 컴퓨터의 환경설정에 맞추어 역동적으로 반응함.
예를 들어, 사용자 컴퓨터에 flash 설치되지 않았다면
iframe은 이것을 탐지해서 다른 대안을 찾음.
설정이 업데이트 되면, iframe 삽입된 객체도 실시간으로 업데이트됨.
object 로 코드를 삽입하면, 업데이트를 할 수가 없음.
▶함께 사용할 수 있는 속성
data : URL 삽입할 객체의 주소
type: MIME_type 삽입할 객체의 MIME type (파일 종류)
width : px, % 객체의 너비
heigth : px, % 객체의 높이
classid : class_ID 실행항 프로그램의 URL
html5에서 지원하지 않음
codebase : URL 삽입할 객체 코드 주소(선택적으로 사용)
그 외 속성에 대해서는 여기 참조
mime type은 여기 참조
*html5에서 <object>는 <body>안에만 삽입함. <head> 사이에 올 수 없음.
*삽입할 플러그인의 매개변수는 <param>태그로 지정
<param> 태그는 닫는 태그는 없으며, xhtml의 경우 <param />으로 대신함.
*<object>태그를 지원하지 않는 브라우저를 위해 대체 내용을 넣음.
▶사용 예
html 문서에 또 다른 html 문서 삽입
<object data="test.htm" type="text/html" width="600" height="200">
대체 내용
</object>
html문서에 pdf 문서를 삽입
<object data="test.pdf" type="application/pdf" width="600" height="600">
대체 내용</object>
<param> 태그로, 문서에 관계된 매개변수를 지정할 수 있음
ie는 때때로 위치를 이해하기 위해 src 매개변수가 필요함.
<object type="audio/x-wav" data="test.wav" width="200" height="20">
<param name="src" value="test.wav"> src: 파일의 경로 지정
<param name="autoplay" value="false"> autoplay: 파일을 자동으로 플레이할지 선택(예:true, 아니오:false)
<param name="autostart" value="false"> autoplay와 동일(예:true, 아니오:false)
대체 내용</object>
html문서에 mp3를 삽입
<object type="audio/x-mpeg" data="test.mp3" width="100px" height="100px" autoplay="false">대체 내용</object>
flash 삽입
<object type="application/x-shockwave-flash" width="530" height="400" data="http://www.chemgapedia.de/vsengine/ng/images/help/kugel_rota.swf">
<param name="movie" value="http://www.chemgapedia.de/vsengine/ng/images/help/kugel_rota.swf"/>
<p style="width: 530px; color:red; text-align: center;">Flash not running.</p>
</object>
object.html
▶ classid에 대하여
구 ie는 윈도우 미디어 플레이어가 아닌 것을 실행하기 위해,
어떤 미디어 플레이어를 사용해야할지 말할 필요가 있음. 이때 classid를 사용
mime은 ie를 제외한 다른 브라우저를 위한 파일 유형을 지정.
ie는 class ID가 필요하지만 MIME type을 지닌 <object>를 혼동스러워 하며 에러를 발생함.
이것을 방지하기 위해 조건부 주석의 사용(조건부 주석에 관해서 아래 링크 참조해주세요)
결국 같은 내용을 브라우저에 맞게 두 번 다르게 적어준 것이라 보면 됩니다~
▶사용 예
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="500">
<param name="movie" value="test.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="600" height="500">
<param name="movie" value="test.swf"/>
</object>
<!--<![endif]-->
</object>
classid와 codebase 더 보기
Quicktime player
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"
Windows media Player
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/ nsmp2inf.cab#Version=6,0,02,902"
Real Audio
id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
Flash Shockwave Player
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=8,0,22,0"
「참조 사이트」
http://helpx.adobe.com/flash/kb/object-tag-syntax-flash-professional.html
http://www.danfergusdesign.com/classfiles/generalReference/objectTag.html#variations
'html' 카테고리의 다른 글
| [html/css]정의 목록 <dl><dt><dd> 태그 (2) | 2014.07.10 |
|---|---|
| [html/css]목록을 만드는 <ul> <ol> <li>태그 (3) | 2014.07.09 |
| [html/css] iframe 태그 사용법 (1) | 2014.07.04 |
| [HTML,CSS 작성 규칙] 네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션 (1) | 2014.06.22 |
| 크로스브라우징, 웹표준과 핵(hack) (9) | 2014.04.29 |
댓글