javascript XML CDATA Section 사용 방법
javascript XML CDATA Section 사용 방법
1. XML은 CDATA Section(<![CDATA[ ~ ]]>)이라는 것을 지원하는데, 이 영역 안에 들어갈 경우 <, >, & 와 같은 특수 문자(마크업으로 인식될 문자)들을 일반 문자(<, >, &)와 같이 쓸 수 있다.
즉, <, >, &와 같이 Entity로 써야하는 문자들을 아무런 변환 없이 일반 문자(<, >, &)와 동일하게 사용할할 수 있게 만든다.(하지만 실제 JS 영역 안의 Entity 문자는 브라우저가 Entiry 문자 그대로 해석해 버리기 때문에 일반 문자로 변환되지 않는 단점이 존재한다.)
- 소스보기는 위 HTML TAB 이동!!!(결과 페이지: http://mohwa.org/html/cdata.xhtml)
2. Javascript 코드에 CDATA Section 삽입 시 시작과 끝 부분에 //(주석)을 포함하는 것은 해당 Section을 해석하지(오래된 브라우저) 못하는 브라우저에 대한 에러를 막기 위해서다.(위 소스 코드를 참조)
3. 브라우저가 해당 페이지의 응답 Content-Type을 XHTML로 해석 시 제대로 작동하며, HTML등 다르게 해석 시 에러가 발생한다.(대부분의 브라우저(IE8+, Chrome, Safari, FF)에서 해당 파일의 확장명을 *.xhtml로 생성한 경우 서버는 페이지의 응답 Content-Type을 "application/xhtml+xml"로 반환한다. 그렇지 않은 경우 보통 "text/html"로 반환하고 페이지 에러가 발생하게 된다.)
- Content-Type: text/html
- (문법오류):
- Content-Type: application/xhtml+xml
- 결과(성공)페이지:
4. 파일의 확장명을 *.xhtml로 생성하거나, 응답 Content-Type을 "application/xhtml+xml"로 지정한 경우 브라우저는 자동으로 XML 유효성 검사를 실행하게 된다.(**IE를 제외한 대부분의 브라우저**)
즉, 개발 시 "W3C Validator"로 재 확인해 볼 필요없이 검증이 실시간으로 가능해지며, 그에 따른 개발 비용을 줄일 수 있있다.
- Chrome:
- Firefox:
5. "text/html" 응답 Content-Type에서 위 문제(</script> 문자열 사용?)를 해결할 수 있는 방법으로, 해당 태그 문자열을 아래와 같이 변경해 주면 된다.
- 소스보기는 위 HTML TAB 이동!!!
참고사이트:
XHTML과 CDATA의 문제점
http://kwon37xi.egloos.com/3798259
XHTML 에서 자바스크립트 사용하기
http://forums.mozilla.or.kr/viewtopic.php?f=9&t=3433
