T
ToolBox
EN
guide

HTML 특수문자 사용법 — & < 왜 필요하고 어떻게 쓰나요?

2026-03-08 · 4분 읽기

HTML 특수문자란?

HTML 문서를 작성하다 보면 꺽쇠 괄호 <나 앰퍼샌드 & 같은 문자를 직접 입력하고 싶을 때가 있습니다. 그런데 이 문자들은 HTML에서 특별한 의미를 가지고 있어서, 그대로 입력하면 브라우저가 HTML 태그나 문자 코드로 잘못 해석할 수 있습니다.

이런 문제를 해결하기 위해 HTML은 **엔티티(Entity)**라는 특수한 표기법을 제공합니다. &lt;처럼 &로 시작하고 ;로 끝나는 형태로, 브라우저가 이것을 만나면 해당하는 문자(여기서는 <)를 화면에 표시합니다.

왜 HTML 엔티티가 필요한가?

이유 1: HTML 문법 충돌 방지

HTML 태그는 <와 >로 감쌉니다. 만약 글에서 “5 < 10”이라고 쓰고 싶은데 <를 그냥 입력하면, 브라우저는 이것을 태그의 시작으로 인식합니다. 그러면 뒤의 텍스트가 깨지거나 예상치 못한 렌더링이 발생합니다.

<!-- 잘못된 예: 브라우저가 <10을 태그로 오해 -->
<p>5 < 10</p>

<!-- 올바른 예 -->
<p>5 &lt; 10</p>

이유 2: 앰퍼샌드(&) 처리

URL 파라미터나 일반 텍스트에서 &를 그대로 쓰면, 브라우저가 HTML 엔티티의 시작으로 인식합니다. 특히 링크 href 속성에서 쿼리스트링에 &가 있을 때 주의해야 합니다.

<!-- 잘못된 예 -->
<a href="search?q=html&lang=ko">검색</a>

<!-- 올바른 예 -->
<a href="search?q=html&amp;lang=ko">검색</a>

이유 3: 키보드로 입력하기 어려운 문자

저작권 기호 ©, 등록 상표 ®, 화폐 기호 €처럼 일반 키보드로 바로 입력하기 어려운 문자도 엔티티로 간단히 입력할 수 있습니다.

자주 쓰는 HTML 엔티티 목록

문자엔티티 이름엔티티 숫자설명
&&amp;&#38;앰퍼샌드
<&lt;&#60;작다 (꺽쇠 열기)
>&gt;&#62;크다 (꺽쇠 닫기)
"&quot;&#34;큰따옴표
'&apos;&#39;작은따옴표
&nbsp;&#160;줄바꿈 없는 공백
©&copy;&#169;저작권 기호
®&reg;&#174;등록 상표
™&trade;&#8482;트레이드마크
€&euro;&#8364;유로 기호
£&pound;&#163;파운드 기호
¥&yen;&#165;엔/위안 기호
×&times;&#215;곱하기 기호
÷&divide;&#247;나누기 기호
±&plusmn;&#177;플러스마이너스
—&mdash;&#8212;긴 대시 (em dash)
–&ndash;&#8211;짧은 대시 (en dash)
•&bull;&#8226;불릿 포인트
…&hellip;&#8230;줄임표
«&laquo;&#171;왼쪽 이중 꺽쇠
»&raquo;&#187;오른쪽 이중 꺽쇠

  — 가장 많이 오용되는 엔티티

&nbsp;는 Non-Breaking Space(줄바꿈 없는 공백)의 약자입니다. 일반 공백과 다르게 이 공백에서는 줄바꿈이 일어나지 않습니다. 예를 들어 “10 km”에서 숫자와 단위가 다른 줄로 분리되지 않게 하려면 10&nbsp;km처럼 씁니다.

그런데 많은 초보자들이 들여쓰기나 여러 칸 공백을 표현하기 위해 &nbsp;를 남발합니다. 이것은 좋은 방법이 아닙니다. 들여쓰기와 간격은 CSS의 padding, margin, text-indent로 처리하는 것이 올바릅니다.

이메일 HTML에서 엔티티 사용

HTML 이메일은 일반 웹 페이지보다 브라우저 지원이 제한적입니다. 이메일 클라이언트(Outlook, Gmail 등)마다 HTML 파싱 방식이 달라서, 엔티티 사용이 더욱 중요합니다.

이메일에서 특히 주의할 점은 다음과 같습니다.

  • 이메일 제목에서 &를 쓸 때는 반드시 &amp;를 사용하세요. 일부 클라이언트에서 인코딩 문제가 발생합니다.
  • 특수 기호를 사용할 때는 이름 엔티티보다 숫자 엔티티(&#169; 형태)가 더 안전합니다. 모든 이메일 클라이언트가 이름 엔티티를 완전히 지원하지는 않습니다.
  • 한국어 이메일에서 큰따옴표가 깨지는 경우 &quot;를 사용하세요.

이름 엔티티 vs 숫자 엔티티

HTML 엔티티는 두 가지 형태로 표현할 수 있습니다.

  • 이름 엔티티: &amp;, &lt;, &copy; — 읽기 쉽고 기억하기 쉬움
  • 숫자 엔티티(10진수): &#38;, &#60;, &#169; — 모든 환경에서 안정적
  • 숫자 엔티티(16진수): &#x26;, &#x3C;, &#xA9; — 유니코드와 연계 시 유용

일반적인 웹 개발에서는 이름 엔티티가 가독성이 좋습니다. 이메일이나 구형 시스템과 연동할 때는 숫자 엔티티가 더 안전합니다.

실전 활용 예시

코드 블록에서 HTML 코드 표시

기술 블로그나 문서에서 HTML 코드 자체를 텍스트로 보여줄 때:

<pre><code>
&lt;div class="container"&gt;
  &lt;p&gt;안녕하세요&lt;/p&gt;
&lt;/div&gt;
</code></pre>

저작권 표시

<footer>
  <p>&copy; 2026 My Company. All rights reserved.</p>
</footer>

가격 표시

<p>가격: &euro;29.99 / &pound;24.99 / &yen;3,000</p>

마무리

HTML 엔티티는 처음에는 번거롭게 느껴질 수 있지만, 브라우저 호환성과 HTML 문법 안정성을 위해 꼭 필요한 요소입니다. 특히 &, <, >, " 이 네 가지는 반드시 엔티티로 변환하는 습관을 들이세요.

어떤 특수문자를 엔티티로 변환해야 할지 모르겠다면, HTML 엔티티 도구에서 문자를 검색하거나, HTML 코드를 붙여넣어 자동으로 변환해보세요.