xhtml Script block & Style block | CDATA section


Home > Document > xhtml > Reference > xhtml Script block & Style block

xhtml 문서가 갖추어야 될 근본적인 요건

이번 페이지에서는 이 사이트의 XML 메뉴를 열면 설명하려고, 그 동안 미루어 왔던 'xhtml에서의 script block과 style block의 사용법'(W3C의 xhtml1.0 Script and Style element 참조)에 대한 설명을 하려고 합니다. 처음 xhtml 메뉴를 넣었을 때는 지금 다루려고하는 내용 보다, 이 부분의 배경 지식으로 설명해야 될 부분이 오히려 더 많아서 하지 못하고 찝찝하게 남겨 두었는데 , 이제 XML 메뉴를 열게 되었으니 드디어 이 부분을 다룰 수 있게 되었습니다. 그런데 여기서 다시 한 번 생각해 봐야 할 문제는 'xhtml을 왜 만들었을까' 하는 xhtml의 탄생 목적에 대한 근본적인 의문 입니다. 우선 이 사이트의 xhtml 메뉴의 첫 번째 페이지인 'xhtml은 뭔가?' 에서 언급한 xhtml의 목적을 다시 한 번 살펴 봅시다. xhtml의 목적은 아래와 같이

"xhtml 의 목적은 Computer OS, Browser 종류 등에 관계 없이 모든 환경에서 호환되는 웹 표준을 만드는데 있습니다. 지금과 같이 IE에서는 보이는데, NN에서는 안 보인다든지 아니면 그 반대라든지 하는 경우를 없애고 나아가서 PDA 같은 무선 단말기, 휴대 전화 등 과도 교신하기 위해서 입니다."

라고 설명한 바 있습니다. 사실 위의 문구는 W3C의 XML 1.0 specification에 있는 XML의 10 개의 'Origin and Goals' 중에 두 번째 항목인 'XML shall support a wide variety of applications' (XML은 모든 종류의 다양한 application 들을 지원할 수 있어야 된다.)' 에 해당되는 말입니다. 따라서 xhtml의 목적을 위의 'Origin and Goals'의 두 번째 항목에 의거해서 달리 표현하면 'xhtml은 HTML 문서를 XML parser에서도 처리할 목적으로 만들어졌다.' 라고 할 수 있습니다. 즉, xhtml 문서를 HTML parser는 물론이고 XML parser로도 parsing 되도록 하겠다는 것 입니다. 그렇다면 우리가 xhtml 문서를 만들 때 항상 염두에 두어야 될 것은 두 가지 입니다. 첫 번째는 너무 당연한 말처럼 들리겠지만 내가 '작성하는 xhtml 문서가 HTML parser에서 읽혀지는데 문제가 없겠느냐' 하는 것이고, 두 번째는 그 반대로 '또한 그 것이 XML parser로 읽혀 졌을 때 문제가 없겠는냐' 하는 것 입니다.

그런데 일반적으로 xhtml 문서가 HTML parser에 의해 읽혀졌을 때는 문제가 없습니다. 왜냐하면 HTML parser 에는 W3C HTML spec에 지정된 각 element 의 content type 에 따라 text content들을 알아서 처리하도록 정의되어 있는데다가, 웬만한 오류 정도는 허용하기 때문이죠. 오히려 그 '허용'이라는 자체가 문제일 뿐입니다. 그렇다면 우리는 xhtml 문서가 XML parser에서 읽혀졌을 때 발생할 수 있는 문제의 소지에 대해서 만 살펴보면 되겠습니다.

Script 구문이 XML parser에서 읽혀졌을 때 발생하는 문제

우리가 사용하는 JavaScript, VBscript 등의 script언어 들에서는 '<', '>' 등의 연산기호의 사용이 불가피 합니다. 그리고 HTML parser는 <script> tag 속의 text content들에 대해서는 CDATA(parser가 parsing 하지 않는 Character DATA)로 취급 합니다. 그 이유는 W3C HTML spec에 script element의 text content 들을 CDATA로 처리 하도록 정의(W3C HTML 4.01 spec의 Script element 참조)해 두었기 때문에 IE, FF 등의 브라우저에 내장된 HTML parser 들이 그 부분에 대해서는 자동적으로 CDATA로 처리하기 때문 입니다.

그런데 '<', '>' 등의 연산기호가 XML parser에 의해 읽혀졌을 때는 사정이 달라집니다. 이런 기호를 그냥 쓰게 되면 '<' 나 '>'와 같은 markup 문자들을 반드시 named entity 인 '&lt;' 나 '&gt;' 로 대치시켜서 사용해야 되는 XML 문법 규정에 의해서 error를 일으키게 된다는 겁니다. 물론 XML 문서라면 이런 문자들을 아래와 같이 XML CDATA section으로 처리하면 될 것 입니다. 코드 실행기로 실행할 때 '<![CDATA[' 와 '//]]>' 부분을 지우고 실행하면 에러를 볼 수 있습니다.

XML 문서에서는 CDATA section을 사용하여 문자들을 parsing하지 않는다.
<?xml version="1.0"?>
<xhtmlscript type="text/javascript">
<![CDATA[
a = 0;
if (a < 1);
alert('OK');
]]>
</xhtmlscript>
코드 실행 하기

XML 메뉴를 열게 되어서, 이 페이지에 대한 배경 지식을 다 설명할 수 있을 줄 알았는데 쓰다 보니 그게 아니로군요. 위의 code 에서 script를 xhtmlscript로 바꾼 이유를 설명해야 되겠습니다. IE 가 HTML code와 XML code를 구분하는 방법은 두 가지 입니다. 첫 번째는 문서의 확장자에 다른 구분인데, 확장자가 .xml, .xsl, .xsd 이면 무조건 XML 문서로 parsing 합니다. 두 번째는 위의 code와 같이 문서 첫 번째 줄에 XML 선언부 (<?xml version="1.0"?>)가 있어도 XML 문서로 parsing 하게 됩니다. 그런데 XML 선언부가 있더라도 사용되는 element가 HTML element이면, 그 tag에 대해서는 HTML로 취급합니다. 따라서 위의 code를 .xml 확장자로 저장했다면 xhtmlscript를 script로 사용해도 XML 문서로 parsing 하겠지만, 이 페이지에서는 저장하지 않은 상태에서 '코드 실행기'로 돌려보기 위해서 'xhtmlscript'로 이름을 바꿨습니다. 참고 하세요.

하지만 이 방법은 CDATA나 PCDATA를 임의로 지정할 수 없는 HTML에서는 쓸 수 없는 방법입니다. 그렇다고 HTML 문서의 script tag 속에서 '<'와 같은 markup 문자들을 아래와 같이 '&lt;' 같은 named entity로 대치 시킨다면 어떻게 될까요.

HTML 문서의 script tag 속에서 markup 문자들을 named entity로 대치 시킨 경우
<script type="text/javascript">
a = 0;
if (a &lt; 1);
alert('OK');
</script>
코드 실행 하기

이 경우는 XML parser에서는 문제를 일으키지 않지만, 이 번에는 HTML parser에 의해서 error를 냅니다. 그 이유는, 위의 script 만을 예로 들면 '&lt;' 의 마지막 문자인 semi-colon(;)이 한 줄의 script 를 끝내는 구분 문자 (JavaScript 메뉴의 JavaScript의 명령 Line의 처리 참조)로 사용되기 때문에 code 중에 if 다음에 나오는 괄호를 닫지 않은 JavaScript syntax 에러를 내기 때문이죠. 하지만 이 것 보다 더 큰 문제는 위와 같이 '<' 나 '>' 를 모두 named entity로 대치 시키게 되면 머리 속으로 named entity를 원래의 문자로 바꾸면서, script code 속에 있는 logic 까지 동시에 이해하기가 너무 난해해 진다는 점 입니다. 특히 초보자의 경우 '&lt;' 나 '&gt;' 를 해석하기도 버거운데 logic 까지 이해해야 된다는 것은 무리 입니다.

그러면 결론은 xhtml 문서에서는 script tag을 쓰면 안된다는 것 일까요. 이런 문제를 근본적으로 해결하는 방법은 xhtml 1.1이나 향후에 발표될 xhtml 2.0에서와 같이 xhtml 문서에 사용하는 script 들을 모두 .js file로 만들어서 그 속에 넣고 외부 링크로 사용하는 것 입니다만, 피치 못하게 문서 속에 script block을 사용해야 될 경우에는 아래와 같은 방법을 씁니다.

CDATA section의 시작과 끝에 JavaSCript comment를 사용하여 해결한다.
<script type="text/javascript">
//<![CDATA[
a = 0;
if (a < 1);
alert('OK');
//]]>
</script>
코드 실행 하기

이로써 XML 문서 안에서 markup 관련 문자들을 escape 시키지 않고 사용하여 script code 등의 내용을 사람이 보기 쉽게 하는데는 성공을 했습니다. 그렇지만 위에서 말했다시피 CDATA section은 HTML에서는 사용하지 못하기 때문에, 위와 같이 CDATA section의 시작과 끝에 JavaScript comment(주석문)을 붙여서 처리해 주므로써 이 문제를 해결 할 수 있습니다. 일종의 trick이라고 할 수 있겠습니다. 하지만 이 방법이 선뜻 이해가 가지않을 지도 모르므로 위의 code를 HTML parser로 로 parsing한 output과 XML parser로 parsing한 output으로 구분해서 비교해 보도록 하겠습니다.

HTML parser의 output
<script type="text/javascript">
//<![CDATA[
a = 0;
if (a < 1);
alert('OK');
//]]>
</script>

HTML parser에서는 위의 흐리게 표시한 부분은 JavsScript 속에서 사용하는 comment인 '//'를 사용했으므로 뒷 부분의 '<![CDATA[' 와 '//]]>' 를 JavaScript 해석기가 script로 해석하지 않습니다.

XML parser의 output
<script type="text/javascript">
//<![CDATA[
a = 0;
if (a < 1);
alert('OK');
//]]>
</script>

XML parser에서는 첫 줄의 '//' 를 제외한 나머지 부분을 모두 CDATA로 처리하기 때문에 내용 그대로를 XSLT parser와 같은 application으로 전달합니다.

이렇게 해 주므로해서 HTML parser와 XML parser 양쪽에서 script 내용을 손상시키거나 error를 내지 않고 처리할 수 있게 되었습니다. 물론 이 방법 보다 더 근복적인 해결 방법은 위에서 말한 것 처럼, xhtml 1.1이나 향후에 발표될 xhtml 2.0 에서와 같이 사용할 script를 .js file로 따로 만들어서 외부에서 link 시켜 사용하는 것 입니다만, 아직 까지는 그 이전 버전을 사용하는 경우가 많고, 외부 file로 link 시켜서 쓰지 못할 경우도 생길 수 있으므로 당분간은 이 방법을 잘 알아 두는게 좋을 것 입니다. 하지만 향후에 xhtml 2.0 이 발표되면 결국은 외부에서 link 시켜서 써야 될 것으로 예상됩니다.

Style block의 처리

또한 script block에서와 같은 맥락으로 style block을 아래와 같이 처리 한다는 것도 참고 하시기 바랍니다.

CDATA section의 시작과 끝에 style comment를 사용하여 해결한다.
<style type="text/css">
/*<![CDATA[*/
...
style content
...
/*]]>*/
</style>

Script 와 Style 의 MIME type

HTML 4.0 version 이전에는 JavaScript 의 경우 흔히 language="javascript" 의 식으로 'language' attribute를 사용해 왔습니다. 그런데 HTML 4.01 에서는 'language' attribute가 도태(Deprecated)되었습니다. 'language' attribute를 사용한다고 해서 특별한 문제가 생기는 것은 아닙니다만, 문제가 되는 것은 'type' attribute를 빠뜨리는 경우 입니다. 이걸 빠뜨리게 될 경우 xhtml validation에서 warning이 나오게 됩니다. 그런데 그 것 보다 더 중대한 문제가 XML parser에서 생기게 되는데, XML parser는 명시되지 않은 MIME type에 대해서 error message를 보내지는 않지만, 해당 내용을 script나 style 구문으로 처리를 하지 않기 때문에 MIME type을 명시하지 않을 경우, 적용시키고자 하는 내용이 전혀 적용되지 않습니다. 따라서 아래와 같이 MIME type을 명시해 주어야 합니다.

Script tag의 MIME type
<script type="text/javascript">
...
script content
...
</script>
Style tag의 MIME type
<style type="text/css">
...
style content
...
</style>



이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색