HTML 엔티티(entity) 이스케이프(escape), 이스케이핑(escaping)

안녕하세요. 이번 시간에는 HTML 엔티티에 대해서 알아보겠습니다!

혹시 HTML 소스를 보다가  나 < 또는 >를 보신 적이 있나요? 이 문자들은 HTML 파일이 깨져서 나타나는 문자가 아닙니다. 바로 HTML 엔티티입니다.

HTML에서 태그를 표현할 때 다음과 같이 하곤 하죠.

<div>zero</div>

만약 태그 안의 내용물에 <를 넣고 싶다면 어떻게 해야 할까요? 보통 다음과 같이 하겠죠?

<div><zero</div>

하지만, 위와 같이 하면 제대로 나오지 않습니다. 바로 <는 HTML에서 태그의 시작을 알리는 문자이기 때문이죠. 따라서 HTML은 <를 보면 문자로 여기지 않고, 태그의 시작으로 여겨서 뒷 부분이 에러가 납니다. 이러한 특수 문자를 표현하기 위한 것이 HTML 엔티티입니다. <는 &lt;로 나타내면 제대로 나옵니다.

이렇게 특정 문자를 HTML로 변환하는 행위를 Escape(이스케이프)한다고 말합니다.

<div>&lt;zero</div>

비슷한 경우로 띄어쓰기가 있습니다. HTML에서는 아무리 띄어쓰기를 해도 하나의 띄어쓰기로만 인식합니다.

<div>         띄어       쓰기       </div>

그래서 만약 정말 두 칸 이상의 띄어쓰기가 필요할 경우에는 HTML 엔티티를 사용해야 합니다. &nbsp;입니다.

<div>&nbsp;&nbsp;&nbsp;띄어&nbsp;&nbsp;&nbsp;쓰기&nbsp;&nbsp;&nbsp;</div>

이제 띄어쓰기가 원하는 대로 됩니다. 여기서 퀴즈 하나를 내보겠습니다. 만약 &lt;라는 글자를 쓰고 싶을 때는 어떻게 할까요? &lt;를 곧이곧대로 치면 <로 변환되어버립니다. 이 때는 &를 변환해주어야 합니다. &는 &amp;로 변환합니다.

<div>&amp;lt;</div>

&amp;를 입력하려면 &amp;amp;로 써야하는 웃지 못할 상황이 생기기도 합니다. 하나 또 자주 하는 이스케이핑으로 큰따옴표가 있습니다. 큰 따옴표는 &quot;로 이스케이프합니다.

<div>&quot;zero&qout;</div>

자주 쓰이는 것들을 정리해보았습니다.

• < -- &lt;
• > -- &gt;
• (띄어쓰기) -- &nbsp;
• & -- &amp;
• " -- &quot;
• ' -- &apos;
• © -- &copy;

기억해두시면 나중에 갑자기 HTML에서 문자가 나오지 않을 때 대처할 수 있을 겁니다.