| 13 오브젝트(object), 이미지와 애플렛(applet) | |
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문연결 |
HTML의 멀티메디아(multimedia) 기능으로 제작자는 페이지에 이미지, 애플렛(applet: 자동적으로 사용자 기계에 다운로드 되어 작동하는 프로그램), 비디오 조각(video clip)과 기타 HTML 문서를 포함 시킬 수 있다.
예를 들어, PNG 이미지를 문서에 포함 시키기 위하여, 제작자는 다음과 같이 쓸 수 있다.
<BODY> <P>그랜드 캐년의 근접 사진이 여기에 있다. <OBJECT data="canyon.png" type="image/png">이것이 그랜드 캐년의 <EM>근접 사진</EM>이다.</OBJECT> </BODY>
이전 HTML의 버전에서 제작자가 IMG를 통 해 이미지를, APPLET을 통 해 애플렛를 포함 시킬 수 있었다. 이들 엘레멘트는 다음 몇가지 제한이 있다.
이 문제들을 위하여 HTML 4.0은 오브젝트 포함의 모든 목적 해결책을 제공하도록 OBJECT 엘레멘트를 도입했다. OBJECT 엘레멘트는 HTML 제작자가 사용도구에 의하여 표현되는 오브젝트에 필요 한 원본 코드, 최초값들과 작동(run-time) 데이터 등 모든 것을 지정 할 수 있게 한다. 이 규격에서, 용어 "오브젝트"(object)는 사람들이 HTML 문서 안에 위치 시키기를 원하는 것들을 기술하는데 사용 되고, 이것들을 위해 일반적으로 사용되는 용어로 애플렛(applet), 플러그인(plug-in), 메디아 핸들러(media handler) 등이 있다.
이 새로운 OBJECT 엘레멘트는 과거의 엘레멘트가 수행하는 임무의 일부를 포함한다. 다음 기능 도표를 보라.
| 포함 된 타입 | 구체적(specific) 엘레멘트 | 일반적(generic) 엘레멘트 |
|---|---|---|
| 이미지 | IMG | OBJECT |
| 애플렛 | APPLET (불량한)것이다. | OBJECT |
| 다른 HTML 문서 | IFRAME | OBJECT |
이 도표는 포함(inclusion) 된 각 타입은 구체적(specific) 해법과 일반적(general) 해법을 갖는다. 일반적 OBJECT 엘레멘트는 미래의 메디아 타입들에 대한 해결책으로 사용 될 것이다.
이미지를 포함 하기 위하여, 제작자는 이 OBJECT 엘레멘트 또는 IMG 엘레멘트를 사용 할 수 있다.
애플렛을 포함 하기 위하여, APPLET 엘레멘트는 불량한 것이기 때문에, 제작자는 OBJECT 엘레멘트를 사용하여야 한다.
HTML 문서에 다른 문서를 포함 하기 위하여, 제작자는 새로운 IFRAME 엘레멘트 또는 OBJECT 엘레멘트를 사용 할 수 있다. 양 쪽 다 깔린(embedded) 문서는 주된 문서와 독립적이다. 보는 사용도구는 주 된 문서 안에서 구별 되는 창(window)에 깔린 문서를 표현 할 수 있다. 문서 포함에서 OBJECT 와 IFRAME을 비교하기 위하여 깔린 문서에 대한 주석을 참조하라.
이미지와 다른 포함 된 오브젝트는 관련 된 하이퍼링크를 가질 수 있는데, 두가지 다 표준 연결 기능을 통하여, 또는 이미지맵을 통하여 연결 시킨다. 이미지맵은 포함 된 오브젝트의 활성 지역들을 지정하고, 각 지역의 연결을 지정한다. 활성화 되면 이들 연결은 문서의 읽어 표현하게 되거나 서버의 프로그램을 돌린다.
아래에는 멀티메디아를 포함시키고, 이들 포함 사항들을 위한 이미지맵을 만드는, 제작자가 사용 할 수 있는 다양한 기능을 다루었다.
<!-- 텍스트 만 보는 사용도구에서 문제 발생을 피하고, 이미지 내용을 알아 볼 수 있게하고 사용자가 보이지 않는 사용도구로 항해하기 위하여, ALT로 설명 하고, 서버(server-side) 이미지맵의 사용을 회피 할 필요가 있다. --> <!ELEMENT IMG - O EMPTY -- 깔린(Embedded) 이미지 --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- 깔릴 이미지의 URI -- alt %Text; #REQUIRED -- 짧은 설명 -- longdesc %URI; #IMPLIED -- 긴 설명에 연결(alt 보완) -- height %Length; #IMPLIED -- 높이 덮어 씌움(override) -- width %Length; #IMPLIED -- 너비 덮어 씌움 -- usemap %URI; #IMPLIED -- 사용자(client-side) 이미지맵의 사용 -- ismap (ismap) #IMPLIED -- 서버(server-side) 이미지맵의 사용 -- >
시작태그: 필요 함, 종료태그: 사용 금지
IMG 엘레멘트는 현재 문서의 엘레멘트를 정의 한 위치에 이미지가 깔리게 한다. IMG 엘레멘트는 내용을 가지고 있지 않다. src 애트리뷰트에 의하여 지정 된 이미지로 인라인에 들어가는 것이 보통이다. 예외로는 왼쪽 혹은 오른쪽으로 정렬 된 줄 밖의 유동("floated") 이미지들이 있다.
가족 사진으로 연결을 지정 한 위 예제에서 사진을 직접 현재 문서에 연결시켰다.
<BODY>
<P>나는 방금 휴가로 부터 돌아 왔다! 여기에 호수가에서의 우리 가족 사진
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="호수가에서의 우리 가족 사진">
</BODY>
이 포한은 OBJECT 엘레멘트를 사용하여 다음과 같이 할 수도 있다.
<BODY> <P>나는 방금 휴가로 부터 돌아 왔다! 여기에 호수가에서의 우리 가족 사진 <OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png" type="image/png">호수가에서의 우리 가족 사진 </OBJECT> </BODY>
alt 애트리뷰트는 이미지가 표시 될 수 없을 때 나타 날 대체(alternate) 텍스트를 설정한다(대체 텍스트 설정 방법 참조). 사용도구는 이미지 타입을 지원 할 수 없거나 이미지가 디스플레이 되지 않도록 설정 되었을 때 등 이미지를 지원 할 수 없을 때, 대체(alternate) 텍스트를 표시하여야 한다.
longdesc 애트리뷰트로 풍부 한 설명에 연결 시키는 방법을 설명 한 예제:
<BODY> <P><IMG src="sitemap.gif" alt="HP Labs Site Map" longdesc="sitemap.html"> </BODY>
alt 애트리뷰트는 짧은 이미지의 설명을 제공하는데, 이는 사용자가 longdesc 애트리뷰트로 제공하는 자세 한 설명(여기서는 "sitemap.html")에 연결시켜 볼 것인가를 결정한다.
이미지의 크기(size), 정렬(alignment)와 테두리(border)에 대 한 정보는 오브젝트, 이미지와 애플렛의 보는 표현을 참조하라.
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- 일반적(generic) 깔린(embedded) 오브젝트(object) --> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- 선언되나 즉시화가 되지 않음 -- classid %URI; #IMPLIED -- 작용 지정 - codebase %URI; #IMPLIED -- classid, data, archive의 기준 URI -- data %URI; #IMPLIED -- 오브젝트 데이터 참조 -- type %ContentType; #IMPLIED -- 데이터 컨텐트 타입(content type) -- codetype %ContentType; #IMPLIED -- 코드(code) 컨텐트 타입 -- archive %URI; #IMPLIED -- 공간 글자로 분리된 archive 목록 -- standby %Text; #IMPLIED -- 로딩 중 보이는 메세지 -- height %Length; #IMPLIED -- 높이 덮어 씌우기(override) -- width %Length; #IMPLIED -- 너비 덮어 씌우기 - usemap %URI; #IMPLIED -- 시용자(client-side) 이미지맵 사용 -- name CDATA #IMPLIED -- 폼(form)의 부분에서 발송(submit) -- tabindex NUMBER #IMPLIED -- 탭(tab) 순서에서의 위치 -- >
시작태그: 필요 함, 종료태그: 필요 함
대부분의 사용도구는 자체내에 텍스트, GIF 이미지, 색상, 폰트와 그래픽 엘레멘트 등 일반적인 데이터 타입을 표현하는 기능을 갖는다. 사용도구가 지원하지 않는 테이터 타입을 표현하기 위하여, 일반적으로 외부의 기능에 돌린다. OBJECT 엘레멘트는제작자 로하여금 외부로 또는 프로그램을 돌릴 것인지를 지정 할 수 있게 한다.
대부분의 일반적인 경우, 제작자 다음 세가지 종류의 정보를 지정 할 필요가 있다.
OBJECT 엘레멘트는 제작자가 모든 세 타입 데이터를 지정 할 수 있게 하지만, 이 모든 세 타입을 한번에 지정 할 필요는 없다. 예를 들어, 작은 애니메이션(animation)을 수행하는 자체 포함 애플렛 등 일부 오브젝트는 이것이 필요하지 않을 수 있다. 다른 것들은 시동 초기화를 필요로 하지 않을 수 있다. 또 다른 것들은 추가적인 적용 정보를 필요로 하지 않을 수 있다. 말하자면 GIF 이미지등에서와 같이 사용도구가 이 타입의 데이터를 어떻게 표현 할 것인가를 이미 알고 있을 수 있다.
제작자는 OBJECT엘레멘트를 통하여 오브젝트의 적용과 표현 될 데이터의 위치를 지정한다. 그러나, 작동 시의 값을 지정하기 위하여, 제작자가 오브젝트 초기화에 설명 된 바와 같이 PARAM 엘레멘트를 사용한다.
OBJECT 엘레멘트는 HEAD 엘레멘트의 내용에도 나타날 수 있다. 사용도구는 일반적으로 HEAD에 있는 엘레멘트를 표현하지 않기 때문에, 제작자는 HEAD 내의 OBJECT 엘레멘트에는 표현 될 수 있는 내용을 지정하지 않는다는 것을 알아야한다. HEAD 엘레멘트 안에 OBJECT 엘레멘트를 포함한 예제는 프레임 데이터의 공유를 참조하라.
폼(form)에 있는 OBJECT 엘레멘트에 대해서는 폼의 제어를 참조하라.
사용도구는 OBJECT를 해석하는데 다음과 같은 순서로 해야한다.
제작자는 HEAD 엘레멘트 안의 OBJECT 엘레멘트에 내용을 포함시키지 않아야한다.
다음 예제에, 문서 안에 OBJECT 엘레멘트를 통하여 아나로그 시계 애플렛을 포함 시켰다. Python 언어로 쓰여진 이 애플렛은 추가적인 데이터나 작동 값을 필요로 하지 않는다. classid 애트리뷰트는 애플렛의 위치를 지정한다.
<OBJECT classid="http://www.miamachina.it/analogclock.py"></OBJECT>
사용도구가 이 OBJECT 선언을 해석하는 즉시 시계는 표형으로 표현 될 것이다. 이 오브젝트에 먼저 선언 함으로서 표현을 지연(아래 설명) 시킬 수 있다.
제작자는 사용도구가 기계를 표현하지 못하는 경우를 대비하여 선언에 OBJECT의 내용을 대체(alternate) 텍스트로 포함 시켜야한다.
<OBJECT class id="http://www.miamachina.it/analogclock.py">애니메이션 시계</OBJECT>
OBJECT 엘레멘트 디자인의 한 중요한 효과는 오브젝트의 대체 표현을 지정하는 기능을 제공하는 것이다. 각 깔린(embedded) OBJECT 선언에서 대체(alternate) 컨텐트 타입를 지정 할 수 있다. 만일 사용도구가 최상위의 OBJECT를 표현 할 수 없으면, 다른 OBJECT 엘레멘트 등 그 내용의 표현을 시도한다.
다음 예제에서는, 몇 개의 OBJECT 선언을 하였을 때 어떻게 대체 표현이 작용하는가를 설명한다. 사용도구는 다음의 순서로 첫번째 OBJECT 엘레멘트의 표현을 시도 할 것이다.
<P><!-- 맨 먼저, Python 언어로 쓰여진 지구 애플렛 시도 -->
<OBJECT title="우주에서 본 지구" classid="http://www.observer.mars/TheEarth.py">
<!-- 아니면, MPEG 애니메이션 지구 시도 -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- 아니면, GIF 이미지 지구 시도 -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- 아니면 대체(alternate) 텍스트 시도 -->
우주에서 본 <STRONG>지구</STRONG>.
</OBJECT>
</OBJECT>
</OBJECT>
만일 사용도구가 OBJECT를 표현 할 수 없으면, 최상위의 선언 데이터와 최초 값을 필요로 하지 않는 애플렛을 지정했다. 두번째 선언은 MPEG의 적용 처리 위치의 지정없이 사용도구 애니메이션 방식에 따르도록 MPEG 애니메이션을 지정했고, 여기에 MPEG을 표현 할 수 없는 사용도구가 네트워그에서 "TheEarth.mpeg"을 찾도록 노력하지 않게 type 애트리뷰트도 설정하였다. 세번째 선언은 GIF 화일의 위치와 모든 다른 기능이 실패 할 때 표시 될 대체(alternate) 텍스트를 설정하였다.
인라인(Inline) 대 외부 데이터. 표현 될 테이터는 인라인과 외부 자원의 두 가지 방법으로 제공된다. 인라인 방법은 일반적으로 빨리 표현되지만 많은 양의 데디터를 표시 할 때는 불편하다.
OBJECT에 인라인 데이터가 어떻게 제공되는가를 설명하는 예제이다.
<OBJECT id="clock1" classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...base64 data...">시계.
</OBJECT>
오브젝트 크기, 정렬, 테두리 등에 관한 정보는 오브젝트, 이미지와 애플렛의 보는 표현을 참조하라.
<!ELEMENT PARAM - O EMPTY -- 이름 붙여진 특성 값 --> <!ATTLIST PARAM id ID #IMPLIED -- 문서 전체의 유일한 id -- name CDATA #REQUIRED -- 특성(property) 이름 -- value CDATA #IMPLIED -- 특성 값 -- valuetype (DATA|REF|OBJECT) DATA -- 값을 해석(interpret)하는 벙법 -- type %ContentType; #IMPLIED -- valuetype=ref 일 때 값의 컨텐트 타입 -- >
시작태그: 필요 함, 종료태그: 사용 금지
PARAM 엘레멘트는 작동시 필요한 오브젝트의 값들을 설정한다. 어떤 수의 PARAM 엘레멘트라도 순서에 관계 없이 하나의 OBJECT 또는 APPLET 엘레멘트가 나올 수 있으나, OBJECT 또는 APPLET의 닫기 전에 나와야 한다.
이름과 값의 문법은 오브젝트 적용 시 이해가된다고 가정한다. 이 규격은 사용도구 어떻게 이름/값의 짝을 읽어 표현하고. 두 번 나온 파라메터 이름을 어떻게 해석 할 것인지에 관해서는 기술하지 않았다.
높이와 너비의 최초값이 지정 된 두개의 작동 파라메터를 처리 할 수 있는 애플렛을 가정하고, PARAM를 사용 한 위의 시계 예제를 다시 보자. 최초 크기를 40x40 픽셀(pixel)을 두 개의 PARAM 엘레멘트로 설정하였다.
<OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> 이 사용도구는 Python 언어를 지원하지 않는다. </OBJECT>
다음 예제에서, 오브젝트의 "Init_values" 파라메터(parameter)는 작동(run-time) 데이터의 외부 자원(GIF 화일)을 지정한다. 그래서 valuetype 애트리뷰트(attribute)의 값은 "ref"이고 그 값은 자원을 가지키는 URI이다.
<OBJECT classid="http://www.gifstuff.com/gifappli" standby="Loading Elvis..."> <PARAM name="Init_values" value="./images/elvis.gif"> valuetype="ref"> </OBJECT>
사용도구가 표시하는 기능을 읽어 드리는 동안 메세지응 표시 할 수 있도록 하기 위하여 standby 애트리뷰트도 설정 하였슴을 주시하라.
OBJECT 엘레멘트를 표시 할 때는, 사용도구는 PARAM 엘레멘트의 지접 소속 된(direct children) 내용만을 찾아 OBJECT에 제공(feed)하여야 한다.
그래서 아래 예제에서, 만일 "obj1"이 표현된다면, "param1"은 ("obj2" 가 아니라) "obj1"을 적용한다. 만일 "obj1"이 표현되지 않고 "obj2"가 표시된다면 "param1"은 무시되고 "param2"는 "obj2"을 적용한다. 만일 두 OBJECT가 다 표현되지 않는다면, 아무 PARAM도 적용되지 않는다.
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
오프젝트 적용 위치는 URI로 제공된다. URI의 소개에서 알아 본 바와 같이, 절대 URI의 첫번째 부분은 URI에 의하여 지정되는 데이터의 이전(transfer)에 사용되는 명명 된 방식을 지정한다. HTML 문서에서, 이 방식(scheme)은 "http"인 경우가 많다. 일부 애플렛의 경우 다른 방식을 사용하기도 한다. 예를 들어, 제작자는 자바(Java) 애플렛을 지정하는 "java"로 시작되는 URI나, ActiveX 애플렛 사용하는 경우 "clsid" 를 사용 할 수 있다.
다음 예제는, HTML 문서에 자바(Java) 애플렛을 삽입 한 것이다.
<OBJECT classid="java:program.start"></OBJECT>
codetype 애트리뷰트를 설정 함으로서, 사용도구는 그의 능력에 기초를 한 자바(Java) 적용을 읽어 표현 할 것인가를 결정한다.
<OBJECT codetype="application/java-archive" classid="java:program.start"> </OBJECT>
일부의 표현 방식은 적용의 지정과, 어디에서 그 정보를 찾을 수 있는가 하는 추가적인 정보를 필요로한다. 제작자는 codebase 애트리뷰트를 통하여 오브젝트 적용의 경로 정보를 제공 할 수 있다.
<OBJECT codetype="application/java-archive" classid="java:program.start"> codebase="http://foooo.bar.com/java/myimplementation/" </OBJECT>
다음 예제는 classid 애트리뷰트에서 명명된 방식(scheme) "clsid"로 시작하는 URI를 통하여, 액티브엑스(ActiveX) 오브젝트를 지정하였다. data 애트리뷰트는 다른 시계의 표현 될 데이터의 위치를 지정한다.
<OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm">이 작용은 지원 되지 않는다. </OBJECT>
위의 예제에서는 분리 된 오브젝트 정의 만을 설명하였다. 문서에서 동일 오브젝트에 하나 이상의 인스탄스(instance)를 포함시키고저 할 때, 오브젝트의 선언을 그 인스탄스화으로 부터 분리하는 것이 가능하다. 그렇게 함으로서 여러가지 잇점이 있다.
사용도구에 의하여 읽혀 질 때 실행되지 않도록 오브젝트를 선언하기 위해서는, OBJECT 엘레멘트에서 불린(boolean) declare 애트리뷰트를 설정한다. 동시에 제작자는 OBJECT 엘레멘트에서 id 애트리뷰트를 유일한 값으로 설정하여 선언을 명시하여야 한다. 나중에 오브젝트의 인스탄스화은 이 지정자(identifier)를 참조하여 이루어 진다.
선언 된 OBJECT는 문서 안에서 그 OBJECT의 첫번째 인스탄스(instance) 보다 앞에 위치하여야 한다.
declare 애트리뷰트로 정의 된 오브젝트는 매 번 그 오브젝트를 참조하는 표현이 필요 한 엘레멘트에서 인스탄스화 된다(예를 들어, 활성화 된 연결을 참조, 활성화 된 오브젝트를 참조하는 등).
다음 예제에서, OBJECT를 선언하고, 연결로 부터 참조 함으로서 인스탄스화 되도록 하였다. 그래서 예를 들어, 그 오브젝트는 일부의 하이라이트 된 텍스트를 클릭하므로서 활성화 될 수 있다.
<P> <OBJECT declare id="earth.declaration" data="TheEarth.mpeg" type="application/mpeg"> 우주에서 본 <STRONG>지구</STRONG>의 모습 </OBJECT> ... 문서의 다른 문장 ... <P>멋 있는 <A href="#earth.declaration">지구의 애니메이션!</A>
다음 예제에서는 다른 오브젝트인 작동(run-time) 값을 어떻게 지정하는가를 설명한다. 이 예제에서, 시 문구를 보기 위해 가정적 기능에 보냈다. 이 오브젝트는 이 시를 어떤 폰트로 표현하기 위 한 폰트("font")로 이름 지워진 작동 파라메터를 인식한다. 이 파라메터(parameter)의 값은, 그 자체가 표현되는 것이 아니고, 폰트 오브젝트를 삽입하는 오브젝트이다. 폰트 오브젝트와 시를 보여주는 오브젝트 사이의 관계는 다음과 같이 얻어진다.
<P><OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"> </OBJECT> ... KublaKhan.txt의 시를 여기서 본다. ... <P> <OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt"> <PARAM name="font" valuetype="object" value="#tribune"> <P>자체에 시를 보는 기능은 없다. ... </OBJECT>
declare 애트리뷰트를 지원하지 않는 사용도구에서는 OBJECT 선언의 내용을 표현 해야한다.
공식적인 정의는 변이(transitional) DTD를 참조하라.
애트리뷰트의 정의
애플렛이 순서에서 제외("deserialized")되면 start() 방법(method)은 불러 수행 되나, init() 방법에서는 그렇지 않다. 유효한 애트리뷰트는 원본 오브젝트가 serialized 되었으 때 해제되지 않는다. 이 APPLET 인스탄트에 전달 된 어떤 애트리뷰트든 애플렛에 유용 할 것이다. 제작자는 이 기능을 사용하는데 대단한 주의를 기울여야한다. 애플렛은 serialized되기 전에 중지되어야 한다.
code 또는 object가 있어야 한다. 만일 code와 object가 둘 다 주어 졌을 때, 다른 클라스 이름들를 갖는다면 오류이다.
모든 자바(Java) 지원 브라우저에서 이 엘레멘트는 설계자가 HTML 문서 안에서 자바(Java) 애플렛을 사용하는 것을 허용한다. OBJECT 엘레멘트가 선호되고, 이것은 불량한 것이 되었다.
APPLET의 내용은 이 엘레멘트를 지원하지 않는사용도구에서나 현재의 구성이 애플렛을 지원하지 않도록 설정 되어 있으면 대체(alternate) 정보로 작용한다. 그렇지 않으면 사용도구는 그 내용을 무시하여야 한다.
<APPLET code="Bubbles.class" width="500" height="500"> 물방울 애니메이션을 그린 자바 애플렛. </APPLET>
이 예제는 OBJECT를 사용하여 다음과 같이 다시 쓸 수 있다.
<OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500">물방울 애니메이션을 그린 자바 애플렛. </OBJECT>
최초값은 PARAM 엘레멘트를 통하여 애플렛에 제공 될 수 있다.
<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
환영의 소리를 연주하는 자바 애플렛.
</APPLET>
이 예제는 OBJECT를 사용하여 다음과 같이 다시 쓸 수 있다.
<OBJECT codetype="application/java"
classid="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
환영의 소리를 연주하는 자바 애플렛.
</OBJECT>
때로는, 문서에 연결하는 대신, 제작자가 원(primary) HTML 문서 안에 직접 깔기(embed)를 원 할 수 있다. 이를 위하여 제작자는 IFRAME 엘레멘트 또는 OBJECT 엘레멘트를 사용 할 수 있다. 그러나 엘레멘트는 몇가지 점에서 다르다. 이 두가지 엘레멘트는 내용 모델에서 다를 뿐 만 아니라, IFRAME 엘레멘트는 목표(target) 프레임이 될 수 있고(목표 프레임 정보 설정 참조), 사용도구에 의 해 인쇄, HTML 자원 보기 등에서 포거스(focus) 선택(selected)을 할 수 있다. 사용도구는 선택 된 프레임의 엘레멘트를 표현하는데, 선택되지 않은 프레임과 구별되도록 할 수 있다.(예를 들어, 선택 된 프레임에 테두리를 그린다,)
깔린(embedded) 문서는 전적으로 그 문서가 깔려진 문서와 독립적이다. 예를 들어 깔린 문서 안의 상대 URI는 깔린 문서의 기준 URI에 따라 산정되지 만, 메인 문서의 기준 URI에 따르는 것이 아니다. 깔린 문서는 다른 문서(예: 보조창에서) 안에서 만 그 대로 또는 독립적으로 표현된다.
예를 들어 다음 줄이 embed_me.html의 내용을 OBJECT 정의가 나타나는 위치에 깔렸다.
... 앞의 문장 ... <OBJECT data="embed_me.html">주의: embed_me.html는 깔릴 수 있다.</OBJECT> ... 뒤의 문장 ...
OBJECT의 내용은 data 애트리뷰트로 지정 된 화일이 로딩(load) 될 수 없을 때 만, 표현된다는 것을 상기하라. 화일이 자신을 포함하는 경우, 사용도구의 작용은 정의되어 있지 않다.
이미지맵은 제작자로 하여금 이미지 또는 오브젝트의 지역을 지정하고, 각 지역에 (문서를 읽고 표현, 프로그램을 돌림 등) 특정 작용을 지정하여, 사용자가 지역을 활성화 시켰을 때 작동이 되도록 하는 것이다.
이미지맵은 오브젝트 위에서 감지 할 수 있는 지하학적 지역의 규격과 연관하여 생성한다.
두 종류의 이미지맵이 있는데:
비그래픽(non-graphical) 사용도구로 브라우징하는 사람들이 접근하기 쉽다는 점과, 지정한 위치가 작동 지역 위에 있는가 아닌가를 즉각적으로 알 수 있다는 최소한 두가지 이유에서, 사용자 이미지맵은 서버 이미지맵 보다 선호된다.
<!ELEMENT MAP - - ((%block;)+ | AREA+) -- 사용자(client-side) 이미지맵 --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #REQUIRED -- 맵 사용(usemap)의 참조를 위하여 -- >
시작태그: 필요 함, 종료태그: 필요 함
<!ELEMENT AREA - O EMPTY -- 사용자(client-side) 이미지맵 지역(area) --> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- 좌표를 해석하는 제어(control) -- coords %Coords; #IMPLIED -- 컴마로 분리 된 길이들의 목록 -- href %URI; #IMPLIED -- 연결 자원의 URI -- nohref (nohref) #IMPLIED -- 이 지역은 작용하지 않음 -- alt %Text; #REQUIRED -- 짧은 설명 -- tabindex NUMBER #IMPLIED -- 탭 순서에서의 위치 -- accesskey %Character; #IMPLIED -- 접속키 글자 -- onfocus %Script; #IMPLIED -- 엘레멘트에 초점(focus)을 줌 -- onblur %Script; #IMPLIED -- 엘레멘트에서 초점 해제 -- >
시작태그: 필요 함, 종료태그: 사용 금지
MAP 애트리뷰트 정의
AREA 애트리뷰트 정의
좌표(coordinates)는 좌측 맨위의 꼭지점으로 부터의 거리로 모든 값은 길이이고 컴마로 분리된다.
엘레멘트로 이미지맵에 연관시키는 애트리뷰트
MAP 엘레멘트는 하나 이상의 엘레멘트(IMG, OBJECT, 또는 INPUT)에 연관 될 수 있는 사용자 이미지맵을 정의한다. 이미지맵은 엘레멘트의 usemap 애트리뷰트를 통하여 한 엘레멘트에 연관된다.
OBJECT에 usemap 애트리뷰트가 있으면, 그 오브젝트는 이미지에 포함된다는 것을 의미한다. 또 한, OBJECT 엘레멘트가 사용자 이미지맵에 연관되었다면, 사용도구는 사용자 이미지맵의 정의에 의한 OBJECT로 작동시킬 수 있다. 이는 오디오브라우저나 로보트 등 사용도구가 처리 없이 OBJECT로 작동하도록 한다. 사용도구는 오브젝트가 읽어 표현하기나 처리하지 않을 수도 있다. 한 OBJECT가 연관 된 이미지맵을 가지면, 제작자는 그 오브젝트가 모든 사용도구에 의하여 읽어 표현하기나 처리가 될 것이라고 기대 할 수는 없다.
각 MAP 엘레멘트는 다음 중 하나를 포함한다.
만일 두개 이상 지정 된 지역이 중복 되었다면, 문서에서 가장 먼저 나타난 지역 결정 엘레멘트가 우선하여 적용된다.
사용도구와 제작자는 그랙픽을 지원하지 않거나 사용자가 접속 할 수 없는 경우를 위해, 그래픽 이미지맵에 대체 텍스트를 제공하여야 한다. 예를 들어, 사용도구는 alt 텍스트로 그래픽 이미지맵의 자리에 텍스트로 된 연결들을 만들 수 있다. 이와 같은 연결들은 키보드, 음성에 의한 활설화 등 여러가지 방법으로 활성화 될 수 있다.
주기: MAP은 HTML 2.0 버전 사용도구에는 맞지 않는다.
다음 예제에서, OBJECT 엘레멘트에 사용자 이미지맵을 만들었다. OBJECT가 표현 될 때 이미지맵의내용이 보이지 않게 하기 위하여, OBJECT 엘레멘트의 내용에서 MAP 엘레멘트를 감추었다("hide"). 결과적으로 OBJECT가 표현되지 못 할 경우에 한해서 MAP 엘레멘트의 내용은 표현 될 것이다.
<HTML>
<HEAD><TITLE>쿨(cool) 싸이트!</TITLE></HEAD>
<BODY>
<P>
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>싸이트를 방문하시오.
<A href="guide.html" shape="rect" coords="0,0,118,28">접속 안내</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">가기</A> |
<A href="search.html" shape="circle" coords="184,200,60">검색</A> |
<A href="top10.html" shape="poly"
coords="276,0,373,28,50,50,100,120">Top Ten</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
사용도구가 OBJECT를 표현 할 수 있을 때도 이미지맵의 내용을 표현하기를 원 할 수 있다. 예를 들어, 이미지맵에 OBJECT 엘레멘트와 페이지의 바닥에 텍스트로 된 항해 참고(navigation bar)를 동시에 표현하기를 원하면, 이를 위하여 MAP 엘레멘트를 OBJECT 밖에서 정의한다.
<HTML>
<HEAD><TITLE>쿨(cool) 싸이트!</TITLE></HEAD>
<BODY><P>
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT>
... 페이지의 다른 문장들 ...
<MAP name="map1">
<P>싸이트를 방문하시오:
<A href="guide.html" shape="rect" coords="0,0,118,28">접속 안내</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">가기</A> |
<A href="search.html" shape="circle" coords="184,200,60">검색</A> |
<A href="top10.html" shape="poly"
coords="276,0,373,28,50,50,100,120">Top Ten</A>
</MAP>
</BODY>
</HTML>
다음 예제에서, AREA 엘레멘트를 사용하여 비슷한 이미지맵을 만들었다. alt 텍스트의 사용에 유의하라.
<P> <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <P>이것은 항해 바(navigation bar)이다. </OBJECT> <MAP name="map1"> <AREA href="guide.html" alt="접속 안내" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="검색" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="가기" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,373,28,50,50,100,120"> </MAP>
OBJECT 대신 같은 MAP 선언으로 IMG 엘레멘트를 사용한 비슷한 예제.
<P><IMG src="navbar1.gif" usemap="#map1" alt="항해 바(navigation bar)">
다음 예제는 이미지맵을 공유(share) 할 수 있는 방법을 설명한다.
사용도구가 이런 양식을 지원하지 않을 때 지역의 재지정(fallback)을 위해서는 네스트 된(Nested) OBJECT 엘레멘트가 유용하다. 예를 들어:
<OBJECT data="navbar.png" type="image/png"> <OBJECT data="navbar.gif" type="image/gif"> 이미지 설명 텍스트 ... </OBJECT> </OBJECT>
만일 그 사용도구가 PNG 양식을 지원하지 않으면, GIF 이미지를 표현하도록 시도 할 것이다. 예를 들어 음성 언어(speech-based) 사용도구 등과 같이 만일 GIF를 지원하지 않으면, 안 쪽 OBJECT 엘레멘트에 제공 된 설명 텍스트가 디폴트로 표현된다. 이 방식으로 OBJECT 엘레멘트들이 네스트(nest) 되었으면, 제작자는 그 들 사이에 이미지맵을 공유 할 수 있다.
<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
<OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>싸이트를 방문하시오.
<A href="guide.html" shape="rect" coords="0,0,118,28">접속 안내</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">가기</A> |
<A href="search.html" shape="circle" coords="184,200,60">검색</A> |
<A href="top10.html" shape="poly"
coords="276,0,373,28,50,50,100,120">Top Ten</A>
</MAP>
</OBJECT>
</OBJECT>
다음 예제는 이미지맵 안에서 지역(region)을 활성화 하기 위하여 어떻게 앵커(anchor)를 지정하는가를 설명한다. 첫번째 앵커는 연결이 없는 작은 원(circle) 지역을 지정한다. 두번째 앵커는 큰 원 지역을 표시 한 것과 같은 중심 좌표로 지정했다. 이를 조합하면 원의 내부는 비활성이고 외부는 활성 인 모양이된다. 작은 원이 큰 원을 덮어 씌워야 하기 때문에 앵커 정의의 순서가 중요하다.
<MAP name="map1"> <A shape="circle" coords="100,200,50">이 것은 불 활성.</A> <A href="outer-ring-link.html" shape="circle" coords="100,200,250">이것은 활성</A> </MAP>
같은 방식으로, AREA 엘레멘트의 nohref 애트리뷰트는 그 기하학적 지역은 연관 된 연결이 없음을 선언한다.
서버 쪽 이미지맵은 사용자(client-side) 이미지맵으로는 너무 복잡 할 때 관심을 가질 수 있다.
서버 이미지맵은 IMG와 INPUT 엘레멘트에서 만 지정이 가능하다. IMG의 경우, IMG는 A 엘레멘트 안에 있어야 하고, 불린(boolean) 애트리뷰트에 ismap[대소문자 구별 없이: CI]이 설정되어야 한다. INPUT의 경우, INPUT의 타입(type)은 "image"이어야한다.
사용자가 이미지를 클릭하여 연결을 활성화 시키면, 스크린 좌표(coordinates)는 문서가 있는 서버에 직접 보내진다. 스크린 좌표는 이미지에 대한 상대적인 스크린 픽셀(pixel) 값으로 표시된다. 픽셀의 정의와 사용법은 규격 번역문 CSS1을 참조하라.
다음 예제에서, 활성 지역(region)은 서버(server-side) 연결을 지정한다. 이미지 위 어디를 클릭하던 그 크릭된 좌표를 서버에 보낸다.
<A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"></A>
글릭 된 위치는 다음과 같이 서버에 전달된다. 사용도구는 A 엘레멘트의 href 애트리뷰트에 의하여 지정 된 URI로부터 `?'와 그 다음에 컴마로 분리 된 x와 y 좌표로 새로운 URI를 부른다. 그러면 그 연결은 새로은 URI를 사용하여 연결된다. 위 예제에서 사용자가 x=10, y=27의 위치를 클릭하면, 유도 된 URI는 "http://www.acme.com/cgi-bin/competition?10,27"이다.
키보드 입력에 의존하는 음성(speech-based) 사용도구 등 비 그래픽(non-graphic) 사용도구들은 좌표 선택 수단을 사용자에게 제공하지 못하는데, 이런 사용도구는 연결이 활성화 되면 좌표 "0,0"을 서버에 보내야한다.
보는(visual) 정렬과 표현에 관련 된 모든 IMG와 OBJECT 애트리뷰트는 불량한 것이 되었고, 스타일쉬트가 선호된다.
애트리뷰트의 정의
지정되면 width와 height 애트리뷰트는 사용도구에게 원래의 이미지 또는 오브젝트의 크기의 이 값들을 덮어 씌울 것을 알려준다.
오브젝트가 이미지이면 이것은 조정(scale)된다. 사용도구는 제작자에 의해 지정 된 너비(width)와 높이(height)에 가장 잘 맞게 오브젝트나 이미지를 조정해야한다. 길이들이 백분율로도 표시 되었으면, 현재의 수평 혹은 수직 가용 공간에 대한 백분율이고, 이미지, 오브젝트 혹은 애플렛의 원래 크기에 대한 것이 아니다.
height와 width 애트리뷰트는 사용도구에게 이미지 혹은 오브젝트 크기에 대한 아이디어를 제공하여, 이를 위 한 장소를 예약하고, 이미지 데이터를 읽어오는 동안 문서를 표현할 수 있게 해 준다.
vspace와 hspace 애트리뷰트는 IMG, APPLET, OBJECT 왼쪽과 오른쪽(hspace) 공간과 위쪽과 아래쪽(vspace)에 삽입 될 공간의 양을 지정한다. 이들 애트리뷰트의 디폴트 값은 지정되어 있지 않으나, 일반적으로 작은 0이 아닌 길이이다. 이 두 애트리뷰트는 타입(type) 값이 length이다.
이미지 또는 오브젝트는 예를 들어, 사용자에 의해 테두리가 지정되거나 이미지가 A 엘레멘트의 내용이면, 테두리(border)에 의하여 둘려 쌓인다.
애트리뷰트의 정의
align 애트리뷰트는 IMG, OBJECT, 또는 APPLET의 그 자리에서의 위치를 지정한다.
align의 다음 값들은 주위 텍스트에 대한 오브젝트의 위치를 말한다.
다른 두 값, left와 right는 현재의 왼쪽 혹은 오른쪽 마진(margin)으로 이미지가 유동되게 한다. 유동 오브젝트을 참조하라.
정렬 해석의 차이. 사용도구에 따라 align 애트리뷰트에 대 한 해석이 다르다. 일부는 엘레멘트 이전의 텍스트 열에 만 적용되고, 다른 것들은 엘레멘트의 양 쪽 텍스트에 적용된다.
애트리뷰트의 정의
몇개의 텍스트가 아닌 엘레멘트(IMG, AREA, APPLET, INPUT)에서 제작자는 엘레멘트가 정상적으로 표현 될 수 없을 때 내용을 알려주는 대체 텍스트를 지정하게한다. 대체 텍스트를 지정함으로서 다음과 같은 사용자에게 도움을 줄 수 있다. 그래픽 디스플레이 터미널 없는 사용자, 양식을 지원하지 않는 브라우저를 사용하는 사용자, 시각 장애자, 음성 합성 장치(speech synthesizer)를 사용하는 사람, 그래팩 사용도구가 이미지를 디스플레이 하지 않도록 구성되었을 때, 등
IMG와 AREA 엘레멘트에는 alt 애트리뷰트를 지정하여야 하며, INPUT와 APPLET 엘레멘트에는 선택적이다.
대체 텍스트는 대단히 도움을 주지 만 주하여 사용 되어야 한다. 제작자는 다음 사항을 유의하라.
생략 된 대체 텍스트의 경우들 처리 방법에 대 한 정보 대체 텍스트 생성을 참조하라.
주기: 보다 접근하기 쉬운 HTML 문서의 설계에 대한 추가 정보는 [WAIGUIDE]를 참조하라.
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문연결 |
문서(http://trio.co.kr/webrefer/html40/struct/objects.html)는 자유로이 연결 사용이 가능함.