HTML 엔티티란 무엇인가?
HTML에는 태그와 문법 선언을 위해 미리 예약된 문자들이 있습니다. 이러한 문자를 본문 텍스트에 그대로 사용하면 브라우저가 이를 다르게 해석하여 의도치 않은 오류가 발생할 수 있습니다.
대표적인 예가 부등호입니다. <(보다 작음)과 >(보다 큼)은 HTML 태그의 시작과 끝을 나타내는 기호이기 때문에, 텍스트에 직접 입력하면 브라우저가 이를 일반 문자가 아닌 태그로 인식합니다. 이런 문제를 해결하기 위해 사용하는 것이 바로 HTML 엔티티(Entity)입니다.
엔티티는 예약된 문자나 키보드로 입력하기 어려운 특수문자를 &엔티티이름; 또는 &#엔티티번호; 형태로 표현하는 방식으로, 브라우저는 이를 해당 기호로 변환하여 화면에 출력합니다.
참고: 엔티티 이름은 대소문자를 구분하므로, 반드시 원래 형태 그대로 정확하게 사용해야 합니다.
HTML 엔티티 문법
엔티티는 다음 두 가지 방식으로 작성할 수 있습니다.
&entity_name;
또는
&#entity_number;
엔티티 이름은 기억하기 쉬운 장점이 있고, 엔티티 번호는 모든 환경에서 안정적으로 동작하는 장점이 있습니다. 상황에 맞게 선택하여 사용하면 됩니다.
자주 사용하는 HTML 엔티티 목록
실무에서 가장 많이 활용되는 엔티티들을 아래 표로 정리했습니다.
| 출력 결과 | 설명 | 엔티티 이름 | 엔티티 번호 |
|---|---|---|---|
| < | 보다 작음 (less than) | &lt; | &#60; |
| > | 보다 큼 (greater than) | &gt; | &#62; |
| & | 앰퍼샌드 (ampersand) | &amp; | &#38; |
| " | 큰따옴표 (double quotation mark) | &quot; | &#34; |
| ' | 작은따옴표 (apostrophe) | &apos; | &#39; |
| £ | 파운드 (Pound) | &pound; | &#163; |
| ¥ | 엔화 (Yen) | &yen; | &#165; |
| € | 유로 (Euro) | &euro; | &#8364; |
| © | 저작권 (Copyright) | &copy; | &#169; |
| ® | 등록 상표 (registered trademark) | &reg; | &#174; |
활용 팁
이 외에도 줄바꿈 없는 공백을 만드는 &nbsp;(non-breaking space)는 웹 문서에서 공백을 여러 개 유지해야 할 때 매우 자주 사용됩니다. 코드 예제를 화면에 보여주거나, XML·HTML 문법 설명 문서를 작성할 때는 위 표의 부등호와 따옴표 관련 엔티티가 필수적이므로 꼭 기억해 두시기 바랍니다.