HTML Special Characters Guide — Why & < Are Necessary and How to Use Them
HTML 특수문자란?
HTML 문서를 작성하다 보면 꺽쇠 괄호 <나 앰퍼샌드 & 같은 문자를 직접 입력하고 싶을 때가 있습니다. 그런데 이 문자들은 HTML에서 특별한 의미를 가지고 있어서, 그대로 입력하면 브라우저가 HTML 태그나 문자 코드로 잘못 해석할 수 있습니다.
이런 문제를 해결하기 위해 HTML은 **엔티티(Entity)**라는 특수한 표기법을 제공합니다. <처럼 &로 시작하고 ;로 끝나는 형태로, 브라우저가 이것을 만나면 해당하는 문자(여기서는 <)를 화면에 표시합니다.
왜 HTML 엔티티가 필요한가?
이유 1: HTML 문법 충돌 방지
HTML 태그는 <와 >로 감쌉니다. 만약 글에서 “5 < 10”이라고 쓰고 싶은데 <를 그냥 입력하면, 브라우저는 이것을 태그의 시작으로 인식합니다. 그러면 뒤의 텍스트가 깨지거나 예상치 못한 렌더링이 발생합니다.
<!-- 잘못된 예: 브라우저가 <10을 태그로 오해 -->
<p>5 < 10</p>
<!-- 올바른 예 -->
<p>5 < 10</p>이유 2: 앰퍼샌드(&) 처리
URL 파라미터나 일반 텍스트에서 &를 그대로 쓰면, 브라우저가 HTML 엔티티의 시작으로 인식합니다. 특히 링크 href 속성에서 쿼리스트링에 &가 있을 때 주의해야 합니다.
<!-- 잘못된 예 -->
<a href="search?q=html&lang=ko">검색</a>
<!-- 올바른 예 -->
<a href="search?q=html&lang=ko">검색</a>이유 3: 키보드로 입력하기 어려운 문자
저작권 기호 ©, 등록 상표 ®, 화폐 기호 €처럼 일반 키보드로 바로 입력하기 어려운 문자도 엔티티로 간단히 입력할 수 있습니다.
자주 쓰는 HTML 엔티티 목록
| 문자 | 엔티티 이름 | 엔티티 숫자 | 설명 |
|---|---|---|---|
& | & | & | 앰퍼샌드 |
< | < | < | 작다 (꺽쇠 열기) |
> | > | > | 크다 (꺽쇠 닫기) |
" | " | " | 큰따옴표 |
' | ' | ' | 작은따옴표 |
| |   | 줄바꿈 없는 공백 |
© | © | © | 저작권 기호 |
® | ® | ® | 등록 상표 |
™ | ™ | ™ | 트레이드마크 |
€ | € | € | 유로 기호 |
£ | £ | £ | 파운드 기호 |
¥ | ¥ | ¥ | 엔/위안 기호 |
× | × | × | 곱하기 기호 |
÷ | ÷ | ÷ | 나누기 기호 |
± | ± | ± | 플러스마이너스 |
— | — | — | 긴 대시 (em dash) |
– | – | – | 짧은 대시 (en dash) |
• | • | • | 불릿 포인트 |
… | … | … | 줄임표 |
« | « | « | 왼쪽 이중 꺽쇠 |
» | » | » | 오른쪽 이중 꺽쇠 |
— 가장 많이 오용되는 엔티티
는 Non-Breaking Space(줄바꿈 없는 공백)의 약자입니다. 일반 공백과 다르게 이 공백에서는 줄바꿈이 일어나지 않습니다. 예를 들어 “10 km”에서 숫자와 단위가 다른 줄로 분리되지 않게 하려면 10 km처럼 씁니다.
그런데 많은 초보자들이 들여쓰기나 여러 칸 공백을 표현하기 위해 를 남발합니다. 이것은 좋은 방법이 아닙니다. 들여쓰기와 간격은 CSS의 padding, margin, text-indent로 처리하는 것이 올바릅니다.
이메일 HTML에서 엔티티 사용
HTML 이메일은 일반 웹 페이지보다 브라우저 지원이 제한적입니다. 이메일 클라이언트(Outlook, Gmail 등)마다 HTML 파싱 방식이 달라서, 엔티티 사용이 더욱 중요합니다.
이메일에서 특히 주의할 점은 다음과 같습니다.
- 이메일 제목에서
&를 쓸 때는 반드시&를 사용하세요. 일부 클라이언트에서 인코딩 문제가 발생합니다. - 특수 기호를 사용할 때는 이름 엔티티보다 숫자 엔티티(
©형태)가 더 안전합니다. 모든 이메일 클라이언트가 이름 엔티티를 완전히 지원하지는 않습니다. - 한국어 이메일에서 큰따옴표가 깨지는 경우
"를 사용하세요.
이름 엔티티 vs 숫자 엔티티
HTML 엔티티는 두 가지 형태로 표현할 수 있습니다.
- 이름 엔티티:
&,<,©— 읽기 쉽고 기억하기 쉬움 - 숫자 엔티티(10진수):
&,<,©— 모든 환경에서 안정적 - 숫자 엔티티(16진수):
&,<,©— 유니코드와 연계 시 유용
일반적인 웹 개발에서는 이름 엔티티가 가독성이 좋습니다. 이메일이나 구형 시스템과 연동할 때는 숫자 엔티티가 더 안전합니다.
실전 활용 예시
코드 블록에서 HTML 코드 표시
기술 블로그나 문서에서 HTML 코드 자체를 텍스트로 보여줄 때:
<pre><code>
<div class="container">
<p>안녕하세요</p>
</div>
</code></pre>저작권 표시
<footer>
<p>© 2026 My Company. All rights reserved.</p>
</footer>가격 표시
<p>가격: €29.99 / £24.99 / ¥3,000</p>마무리
HTML 엔티티는 처음에는 번거롭게 느껴질 수 있지만, 브라우저 호환성과 HTML 문법 안정성을 위해 꼭 필요한 요소입니다. 특히 &, <, >, " 이 네 가지는 반드시 엔티티로 변환하는 습관을 들이세요.
어떤 특수문자를 엔티티로 변환해야 할지 모르겠다면, HTML 엔티티 도구에서 문자를 검색하거나, HTML 코드를 붙여넣어 자동으로 변환해보세요.