blogger - CDATA 섹션

XML 파서가 코드 블록을 파싱할 때 <, >, & 와 같은 HTML 특수 기호는 문자 데이터로 인식되지 않기 때문에 &lt; &gt; &amp; 와 같이 엔티티로 변환해야 합니다. 

XML 블로거 마크업과 충돌을 피하기 위한 것인데, HTML 코드를 그대로 사용하기 원한다면 CDATA 를 사용해야 합니다.

편집한 소스를 XML 블로거 편집기에 붙여넣기 한 다음 다시 불러오면 따옴표(“)가 &quot; 로 변환된 코드를 볼 수 있는데, 이런 이유 때문입니다.

CDATA 섹션은 <![CDATA[ 로 시작해서 ]]> 로 끝나야 하며 중첩은 허용하지 않습니다. 그리고 CSS 나 JS 에 사용된 경우는 주석을 추가해야 합니다. 형식은 다음 예와 같습니다.

<![CDATA[
  …
]]>

블로거에서 CSS 를 CDATA 섹션 없이 사용하는 경우는 다음과 같이 표현됩니다.

<style type='text/css'>
ul&gt;li:before {
  content: &quot;&hearts;&quot;;
}
</style>
<ul>
  <li>하보니</li>
</ul>

하지만 CDATA 를 사용하면 HTML 기호를 그대로 사용할 수 있어 이점이 많습니다.

<style type='text/css'>
/* <![CDATA[ */
  ul>li:before {
    content: "♥";
  }
/* ]]> */
</style>

엔티티로 표현하는 것보다 HTML 기호를 그대로 사용하는 게 레이아웃을 구성하기에 이해하기 쉽고 더 없이 좋습니다.

자바스크립트를 작성할 때도 & 와 같은 특수 기호 때문에 XML 블로거 편집기에서 오류가 발생할 때가 많습니다. XML 블로거 편집기는 & 와 같은 코드를 허용하지 않기 때문에 오류를 피하기 위해 &amp; 와 같이 자바스크립트를 디코딩하거나 CDATA 에 래핑해야 됩니다.

<script>
if (str.length &gt; 10 &amp;&amp; str.length &lt; 20) {
  alert(&#39;하보니 PHP&#39;);
}
</script>

CDATA 를 사용하면 아래와 같이 그대로 사용할 수 있습니다.

<script>
//<![CDATA[
if (str.length > 10 && str.length < 20) {
  alert('하보니 PHP');
}
//]]>
</script>

CDATA 를 사용하는 이유는 XML 파서가 의도치 않게 잘못 인식되는 것을 막기 위해서 혹은 자바스크립트가 문제없이 동작하도록 하기 위해 사용됩니다. 블로거 위젯도 마찬가지입니다.

<b:widget-setting name='content'>
  &lt;div&gt;하보니 PHP&lt;/div&gt;
</b:widget-setting>

<b:widget-setting name='content'>는 XML 에 의해 구문 분석되지만 위젯을 감싸고 있는 HTML 기호는 오류를 피하기 위해 엔티티로 표현하거나 CDATA 를 사용합니다.

<b:widget-setting name='content'>
<![CDATA[
  <div>하보니 PHP</div>
]]>
</b:widget-setting>