HTML에서 CDATA란 무엇일까? 개념부터 사용법까지 한눈에 정리

CDATA란 무엇인가?

CDATA(Character Data)는 주로 XML 문서에서 특수문자를 이스케이프(escape) 처리하지 않고 그대로 표현해야 하는 긴 텍스트를 포함할 때 사용되는 인터페이스입니다.

일반적으로 XML이나 HTML에서는 <(보다 작음), &(앰퍼샌드) 같은 기호가 마크업 문법으로 해석되기 때문에 반드시 이스케이프해야 합니다. 하지만 CDATA 섹션으로 감싸면 파서가 내부 내용을 마크업으로 인식하지 않고 순수한 문자 데이터로 취급합니다.

CDATA는 다음과 같은 형식으로 작성합니다.

아래 예시는 CDATA 섹션 안에 이스케이프 없이 특수 기호를 그대로 넣은 경우입니다.

<p>다음은 CDATA 예시입니다 <![CDATA[ < > & ]]> — 이 기호들은 이스케이프할 필요가 없습니다.
</p>

XHTML 문서에서 자바스크립트 코드에 <, & 같은 기호가 포함될 경우, 파서가 이를 태그나 엔티티로 잘못 해석하는 것을 방지하기 위해 <script> 태그 내부에 CDATA를 추가하는 방식이 사용되었습니다.

<script type="text/javascript">
    //<![CDATA[
    document.write(">");
    //]]>
</script>

여기서 //는 자바스크립트 한 줄 주석으로, 자바스크립트 엔진이 CDATA 표기를 오류로 인식하지 않도록 처리하는 장치입니다. 즉, XML 파서에게는 CDATA 선언으로 보이고, 브라우저의 스크립트 엔진에게는 단순한 주석으로 보이도록 만든 것입니다.

표준 HTML에서는 <script> 태그 내부의 내용을 이미 원시 텍스트(raw text)로 취급하기 때문에 CDATA를 사용할 필요가 없습니다. CDATA는 어디까지나 XML 계열 문서(XHTML 등)에서 유효한 문법입니다.

⚠️ 참고: 현재 CDATA는 더 이상 권장되지 않는(deprecated) 방식입니다. 최신 HTML5 환경에서는 사용하지 않는 것이 좋습니다.