XML 고려사항

다음은 XML 작업 시 피해야 할 기술 목록입니다.

Internet Explorer - XML 데이터 아일랜드

무엇인가요? XML 데이터 아일랜드는 HTML 페이지에 포함된 XML 데이터입니다.

왜 피해야 할까요? XML 데이터 아일랜드는 Internet Explorer 브라우저에서만 작동합니다.

무엇으로 교체할까요? XML을 구문 분석하고 표시하려면 HTML에서 JavaScript와 XML DOM을 사용해야 합니다.

JavaScript와 XML DOM에 대한 자세한 내용을 보려면 XML DOM 튜토리얼을 방문하세요.

XML 데이터 아일랜드 예제

이 예제에서는 XML 문서 "cd_catalog.xml"을 사용합니다.

XML 문서를 HTML 문서의 <xml> 태그에 바인딩합니다. id 속성은 데이터 아일랜드의 식별자를 정의하는 반면 src 속성은 XML 파일을 가리킵니다:

Instance

<html>
<body>

<xml id="cdcat" src="cd_catalog.xml"></xml>

<table border="1" datasrc="#cdcat">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>
</table>

</body>
</html>

Running Instance»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

<table> 태그의 datasrc 속성은 HTML 테이블을 XML 데이터 아일랜드에 바인딩합니다.

<span> 태그를 사용하면 datafld 속성이 표시할 XML 요소를 참조할 수 있습니다. 이 예에서 참조는 "ARTIST" 및 "TITLE"입니다. XML을 읽으면 각 <CD> 요소에 대해 해당 테이블 행이 생성됩니다.

Internet Explorer - 행동

무엇입니까? Internet Explorer 5에는 동작이 도입되었습니다. 동작은 CSS 스타일을 사용하여 XML(또는 HTML) 요소에 동작을 추가하는 방법입니다.

왜 피해야 할까요? Internet Explorer에서만 동작 속성을 지원합니다.

대신 무엇을 사용해야 할까요? 대신 JavaScript와 XML DOM(또는 HTML DOM)을 사용하세요.

예 1 - 마우스오버 강조

아래 HTML 파일의 <style> 요소는 <h1> 요소의 동작을 정의합니다.

< html>
<head>
<style type="text/css">
h1 { 동작: url(behave.htc) }
</style>
< ;/head>
<body>

<h1>나 위에 마우스를 올려주세요!!!</h1>

</body>
< /html> ;

다음은 XML 문서 "behave.htc"(파일에 요소에 대한 JavaScript 및 이벤트 핸들러가 포함되어 있음)를 보여줍니다.

예

<html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>

<h1>Mouse over me!!!</h1>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

예 2 - 타자기 시뮬레이션

다음 HTML 파일의 <style> 요소는 ID가 "typing"인 요소의 동작을 정의합니다.

<html> ;
<head>
<style type="text/css">
#typing
{
behavior:url(typing.htc);
font-family :'courier new';
}
</style>
</head>
<body>

<span id="typing" speed=" 100">IE5는 DHTML 동작을 도입했습니다.
동작은 CSS를 쉽게 사용하여 HTML 요소에 DHTML 기능을 추가하는 방법입니다
.<br /><br />동작은 어떻게 작동하나요?< ;br />
XML을 사용하면 웹페이지의 모든 요소에 동작을 연결하고
해당 요소를 조작할 수 있습니다.</p>v

다음은 XML 문서 "typing.htc"입니다.

인스턴스

<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />

<script>
var i,text1,text2,textLength,t;

function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}

function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
 {
 clearInterval(t);
 }
}
</script>