7.3 object, param 요소(Element)
object 요소는 HTML 문서에 이미지, 영상 등과 같은 Flash 관련 애플리케이션, QuickTime 비디오, PDF, Word 파일과 같은 객체(object)를 추가할 때 사용하는 요소로 주요 속성은 다음과 같습니다.
|
속성 |
기능 |
|
data |
object에 의해 사용될 데이터의 위치를 URL 형태로 명시 |
|
type |
object 타입을 MIME 형태로 명시 |
|
name |
object의 이름 |
|
form |
Object가 속하는 form 이름을 명시 |
|
width |
object의 너비(width) |
|
height |
object의 높이(height) |
이러한 속성들을 바탕으로 object 요소를 사용하는
형식은 다음과 같습니다.
<object
name=”object이름” type=”MIME 타입”
data=”데이터위치를 나타내는 URL”
width=”object너비” height=”object 높이”/>
만일 비디오 파일을 재생할 경우 HTML5에서 제공되는 video 요소를 이용해도 되지만 적용할 수 있는
비디오 파일이 한정적이라서 아직까지는 object 요소나 뒤에 이어지는 embed 요소를 이용하는 것이
더
적합할 수 있습니다.
swf 파일을 object 요소를 이용하여 HTML5 웹페이지에
나타내볼까요? swf 파일은 어도비 플래시(Adobe Flash)에서
멀티미디어, 액션 스크립트 등을 처리하는 파일 형식으로 현재 웹 상에서 벡터 그래픽 애니메이션에 많이
이용되는 파일 형식입니다. 메모장을 열어서 기본적인 코드를 작성한 후
<body> … </body> 블록을 다음과 같이 작성합니다.
<body>
<object name="objswf"
type="application/x-shockwave-flash" data=" birds.swf"
width="400" height="200"/>
</body>
위와 같이 MIME 타입은 “application/x-shockwave-flash”로 data 속성에
플레이 할 swf 파일을 명시하고 “objectEx.html”로
저장합니다. IE9로 열어보면 다음과 같이 " birds.swf"
파일이 나타납니다.
param 요소는 HTML 문서에 추가된 객체(object)에 파라미터를 전달하는데 사용하며 일반적으로 object 요소와
함께 다음과 같은 형식으로 사용합니다.
<object name=”object이름” type=”MIME 타입” data=”데이터위치를 나타내는 URL”
width=”object너비” height=”object 높이”>
<param name=”파라미터이름” value=”파라미터값”
/>
…
</object>
이번 예제에는 윈도우 미디어 파일 형식인 wmv 파일을 object 요소와 param 요소를 이용하여 HTML 문서에 나타낼 수 있는지 알아볼까요? 메모장을 열어서 HTML5 문서의 기본적인 코드를 작성한 후 <body>…</body> 블록을 다음과 같이 작성합니다.
<body>
<p>호수의 풍경</p>
<object
type="video/x-ms-wmv" data="lake.wmv" width="320"
height="260" >
<param name="src" value="lake.wmv"
/>
<param name="autostart"
value="false" />
</object>
</body>
위에서 wmv 파일의 MIME 타입은 “video/x-ms-wmv” 이며 사용된 wmv 파일은 여러분들의 컴퓨터에서 시작-검색-[파일 또는 폴더] 에서 파일 확장자로 검색하면 나오는 “lake.wmv” 파일을 이용했습니다.(비스타 기준)
그리고 첫 번째 param 요소의 name 속성에 src 라는 파라미터를 설정하고 이 값으로 “lake.wmv”를 value 속성에 설정하여 object 요소의 data 속성값과 연결을 시킵니다.
그 다음 두 번째 param 요소의 name 속성에
“autostart”라는 파라미터를 설정하고 그 값으로 “false”를
설정하여 자동 플레이가 되지 않도록 하는데 만일 “true”로 설정하면 자동으로 플레이됩니다. “paramEx.html”로 저장한 후 IE9로 열어보면 다음과
같이 “lake.wmv” 파일이 임베딩되어 나타나며 플레이 버튼을 클릭하면 재생이 시작됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.5 iframe 요소(Element) (0) | 2013.07.31 |
|---|---|
| 7.4 PDF 파일을 embed 요소(Element)를 이용하여 임베딩 (0) | 2013.07.31 |
| 7.2 map, area 요소(Element) (3) | 2013.07.31 |
| 7. Embedded Content Elements (0) | 2013.07.31 |
| 6.2 del 요소(Element) (0) | 2013.07.31 |
