웹표준

2 articles
Save The Deveolpers

 Save a developer. Upgrade Your Browser.

비단 개발자들만 살리는게 아니다.. 지금 이시간도 웹표준을 지키고자 노력하는 많은 디자이너들.. 표준을 준수하면서도 어떻게 하면 새로운 서비스 기능을 만들 수 있을까를 고민하는 많은 기획자들도 살려주는거다..

IE 6의 어두움에서 벗어나기 위한 이 캠페인에 참여하길 원하는 이들은 아래 링크로 들어가면 자신의 블로그 스킨파일에 넣을 수 있는 스크립트 소스를 받을 수 있다.. 관심있다면 블로그에 스크립트를 설치하는 것도 방법이나 무엇보다 먼저 지금 당장 브라우저 정보를 열어서 버전 번호부터 확인해 보시길..!

via : http://www.savethedevelopers.org/
2008/03/27 14:00 2008/03/27 14:00

예전에 HTML과 javascript를 공부했던 이들이라면 javascript의 HTML 소스상의 표기방식에 대해 잘 알고 있을 것이다.. 대략 아래의 표기방식으로 처리했으리라 생각한다..

[code]<script language="javascript" type="text">
// 스크립트 함수
</script>[/code]

위 표기법은 몇가지 문제를 소유하고 있는데 그 문제는 다음과 같다.

  • language 속성은 표준속성이 아니다.. 현재는 type 속성에 포함되어있고 type="text/javascript" 방식으로 표기한다.. 만약 javascript가 아닌 vbscript를 사용할 경우 type="text/vbscript"로 표기하면 된다..
  • 자바스크립트를 지원하지 않는 예전 브라우저와의 호환을 위해 스크립트 함수 부분을 주석처리해줘야 한다..

위 내용대로 정리하여 올바른 표기법으로 다시 처리하면 아래와 같다..

[code]<script type="text/javascript">
<!-- // 스크립트 함수 //-->
</script>[/code]

여기까지가 대부분이 알고있는 javascript의 표기법이다.. 그런데 시대가 바뀌어 접하게 된 XHTML의 세상에서는 이 역시 바람직한 표기법이 아니게 된다.. (HTML 4.0 기반에서는 위 표기법이 옳은 표기법이다..) XHTML(Extensible HyperText Markup Language)에서는 XHTML 해석기가 <script ~~> 부분을 태그로 잘못 인식할 수 있는 가능성이 있어서 태그로 인식할 경우 스크립트 함수 부분에서 에러가 발생할 수 있다.. XHTML이 XML 포맷을 기반으로 하는 문법이기 때문에 발생하는 문제인데 이 문제를 해결하려면 스크립트 함수 부분을 CDATA escaping 처리를 해주면 된다.. CDATA escaping 처리를 하게 된 javascript 표기법은 아래와 같다..

[code]<script type="text/javascript">
<![CDATA[  스크립트 함수 ]]>
</script>[/code]

위 표기법은 일반적인 경우는 문제가 없지만 언제나 발목을 잡게 되는 자바스크립트를 지원하지 않는 예전 브라우저(특히 CDATA를 인식하지 못하는 브라우저)를 위한 호환처리에서 문제가 발생한다.. 호환 처리를 하기 위해 주석처리 부분을 수정하게 되면 아래와 같이 변경된다..

[code]<script type="text/javascript">
/* <![CDATA[ */
스크립트 함수
/*]]>*/
</script>[/code]

꽤나 복잡한 모양새가 되버렸지만 이렇게 표기하면 XHTML에서 전혀 문제없이 javascript를 사용할 수 있게 된다.. 굳이 이렇게 복잡하게 신경써가면서 처리해야 하는 이유는 다름아닌 다양한 브라우저 유저층들을 위한 호환성 처리 및 표준을 지키게 됨으로 얻을 수 있는 정확한 데이터의 활용 때문이다.. 태터툴즈나 텍스트큐브를 사용하는 사용자들 중 HTML에서 XHTML로 마크업 언어를 변경하는 이들이 많이 있을텐데 이러한 부분을 주의한다면 좀더 표준에 다가설 수 있는 작업을 할 수 있을 것이다..

p.s 본 블로그에서도 위 부분은 아직 제대로 처리하지 못하고 있는 것이 사실인데 이 기회에 한번 스킨 소스를 살펴보려 한다.. 플러그인이 생성한 것까지 보려면 플러그인 소스도 봐야하나?? 참고로 텍스트큐브에서는 위 코드를 아래 방식으로 처리한다.. 주석처리의 방법 상 차이일 뿐 동일한 내용.. :)

[code]<script type="text/javascript">
// <![CDATA[
스크립트 함수
// ]]>
</script>[/code]

참고 :
http://www.w3.org/TR/html4/interact/scripts.html

http://www.w3.org/TR/xhtml1/

2007/09/20 15:27 2007/09/20 15:27