HTML 코드를 글이나 문서에 소개할 때, 브라우저가 그 코드를 실제 마크업으로 해석해 버리면 의도한 대로 화면에 표시되지 않습니다. 이를 방지하려면 예약된(reserved) HTML 문자를 미리 이스케이프(escape)해야 합니다.
문제 상황: 이스케이프하지 않으면 어떻게 될까?
아래 <code></code> 요소 안에 들어 있는 <h1> 태그를 살펴보세요.
<p>아티클 하나에는 <code><h1></code> 요소를 하나만 사용해야 합니다.</p>이 코드를 HTML 문서에 그대로 추가하면 <h1> 부분이 실제 마크업으로 해석되어 화면에 제목으로 렌더링됩니다. 물론 이것은 우리가 원하는 결과가 아닙니다.
원인은 h1을 감싸고 있는 꺾쇠 괄호 <와 >에 있습니다. 이 문자들은 HTML에서 태그의 시작과 끝을 나타내는 예약 문자이기 때문입니다.
해결 방법: 꺾쇠 괄호 이스케이프하기
다행히 해결 방법은 아주 간단합니다.
<(꺾쇠 괄호 열기) → <>(꺾쇠 괄호 닫기) → >
적용한 예시는 다음과 같습니다.
<p>아티클 하나에는 <code><h1></code> 요소를 하나만 사용해야 합니다.</p>이제 위 코드는 의도한 대로 올바르게 표시됩니다.
아티클 하나에는 <h1> 요소를 하나만 사용해야 합니다.
속성이 포함된 코드 이스케이프하기
이번에는 class 속성이 포함된 HTML 코드를 이스케이프해 보겠습니다. 예를 들어 <p class="lead-paragraph"></p> 같은 코드입니다.
<→ <>→ >"(따옴표) → "
이스케이프된 결과는 다음과 같습니다.
<p class="lead-paragraph"></p>마무리 정리
HTML 코드를 화면에 그대로 보여 주려면 예약 문자를 해당 HTML 엔티티로 바꾸면 됩니다. 자주 쓰이는 치환 규칙을 정리하면 다음과 같습니다.
<→<>→>"→"&(앰퍼샌드) →&amp;
특히 앰퍼샌드 자체도 예약 문자라는 점을 기억하세요. 코드 안에 &가 포함되어 있다면 반드시 &amp;로 먼저 변환해야 나머지 엔티티도 정확하게 표시됩니다.