HTML 엔티티 코드(Entity Code) 정리

HTML 엔티티 코드(Entity Code) 정리

1. 엔티티 코드란?

HTML에서 엔티티 코드(Entity Code)는 브라우저가 태그로 인식하거나 키보드에서 입력하기 어려운 특수 문자를 표현하기 위해 사용하는 코드입니다.

예를 들어 <, >, & 같은 기호는 HTML 문법에서 중요한 의미를 갖기 때문에 그대로 입력하면 문제가 생깁니다. 이럴 때 엔티티 코드를 사용하면 안전하게 표시할 수 있습니다.

---

2. 엔티티 코드 표기 방식

• 이름 방식(Name) : &로 시작하고 ;로 끝납니다. 예: < → <
• 숫자 방식(Number) : &#숫자; (10진수) 또는 &#x16진수; 형식. 예: < 또는 < → <

---

3. 상황별 예시

(1) 예약 문자 출력하기

<p>잘못된 출력: <div>안녕하세요</div></p>
<p>엔티티 코드 사용: &lt;div&gt;안녕하세요&lt;/div&gt;</p>

출력 결과:

잘못된 출력:

안녕하세요

엔티티 코드 사용: <div>안녕하세요</div>

---

(2) 따옴표 표시하기

<p>큰따옴표: &quot;Hello World&quot;</p>
<p>작은따옴표: &apos;Hello World&apos;</p>

출력 결과:

큰따옴표: "Hello World"

작은따옴표: 'Hello World'

---

(3) 공백 여러 개 만들기

<p>안녕하세요. 반갑습니다. (공백 무시됨)</p>
<p>안녕하세요.&nbsp;&nbsp;&nbsp;반갑습니다. (엔티티 코드 사용)</p>

출력 결과:

안녕하세요. 반갑습니다. (공백 무시됨)

안녕하세요.   반갑습니다. (엔티티 코드 사용)

---

(4) 저작권, 상표 기호

<p>저작권: &copy; 2025</p>
<p>등록상표: OpenAI&reg;</p>
<p>상표: ChatGPT&trade;</p>

출력 결과:

저작권: © 2025

등록상표: OpenAI®

상표: ChatGPT™

---

(5) 화폐 기호

<p>달러: $100</p>
<p>유로: &euro;100</p>
<p>엔화: &yen;100</p>
<p>파운드: &pound;100</p>
<p>센트: 50&cent;</p>

출력 결과:

달러: $100

유로: €100

엔화: ¥100

파운드: £100

센트: 50¢

---

(6) 수학 기호

<p>지수: x<sup>2</sup> + y<sup>2</sup></p>
<p>± 기호: &plusmn;10</p>
<p>곱하기: 5 &times; 3 = 15</p>
<p>나누기: 10 &divide; 2 = 5</p>
<p>무한대: &infin;</p>
<p>각도: 90&deg;</p>

출력 결과:

지수: x² + y²

± 기호: ±10

곱하기: 5 × 3 = 15

나누기: 10 ÷ 2 = 5

무한대: ∞

각도: 90°

---

(7) 화살표 기호

<p>왼쪽: &larr;</p>
<p>오른쪽: &rarr;</p>
<p>위쪽: &uarr;</p>
<p>아래쪽: &darr;</p>

출력 결과:

왼쪽: ←

오른쪽: →

위쪽: ↑

아래쪽: ↓

---

(8) 카드 문양

<p>하트: &hearts;</p>
<p>다이아몬드: &diams;</p>
<p>클럽: &clubs;</p>
<p>스페이드: &spades;</p>

출력 결과:

하트: ♥

다이아몬드: ◆

클럽: ♣

스페이드: ♠

---

4. 자주 쓰이는 엔티티 코드 정리표

문자	엔티티 이름	숫자 코드	설명
<	&lt;	&#60;	less than (작다 기호)
>	&gt;	&#62;	greater than (크다 기호)
&	&amp;	&#38;	앰퍼샌드
"	&quot;	&#34;	큰따옴표
'	&apos;	&#39;	작은따옴표
©	&copy;	&#169;	저작권 기호
®	&reg;	&#174;	등록상표
™	&trade;	&#8482;	상표 기호
€	&euro;	&#8364;	유로화
£	&pound;	&#163;	파운드화
¥	&yen;	&#165;	엔화
¢	&cent;	&#162;	센트
±	&plusmn;	&#177;	± 기호
×	&times;	&#215;	곱하기
÷	&divide;	&#247;	나누기
∞	&infin;	&#8734;	무한대
°	&deg;	&#176;	각도(도)
←	&larr;	&#8592;	왼쪽 화살표
→	&rarr;	&#8594;	오른쪽 화살표
↑	&uarr;	&#8593;	위쪽 화살표
↓	&darr;	&#8595;	아래쪽 화살표
♥	&hearts;	&#9829;	하트
◆	&diams;	&#9830;	다이아몬드
♣	&clubs;	&#9827;	클럽
♠	&spades;	&#9824;	스페이드
공백	&nbsp;	&#160;	줄바꿈 없는 공백

---

5. 정리

• 엔티티 코드는 HTML에서 예약 문자와 특수 문자를 안전하게 표현하는 방법입니다.
• &이름; 또는 &#숫자; 형식으로 작성합니다.
• 예약 문자, 따옴표, 공백, 저작권 기호, 화폐, 수학 기호, 화살표, 카드 심볼 등 다양한 곳에서 사용됩니다.