웹에서 특수문자 출력하기: HTML 엔티티(Entities) 가이드

 

웹 페이지를 제작하다 보면 태그로 인식되는 문자($<$, $>$ 등)를 그대로 화면에 출력해야 하거나, 키보드에 없는 특수 기호를 넣어야 하는 상황이 발생합니다. 이때 사용하는 것이 'HTML 엔티티(Entities)'입니다.

1. HTML 엔티티란 무엇인가요?

HTML 엔티티는 웹 브라우저가 예약된 문자(Reserved Characters)를 코드로 오해하지 않고 텍스트로 올바르게 표시하도록 돕는 표준 방식입니다.

작성 규칙:

• 엔티티 이름 방식: &name; (예: &nbsp;)
• 엔티티 번호 방식: &#number; (예: &#160;)

2. 반드시 알아야 할 필수 예약 문자

HTML에서 태그를 구성하는 문구들은 엔티티를 사용하지 않으면 화면에 제대로 나오지 않거나 레이아웃이 깨질 수 있습니다.

기호설명엔티티 이름엔티티 번호

<	Less than (왼쪽 괄호)	&lt;	&#60;
>	Greater than (오른쪽 괄호)	&gt;	&#62;
&	Ampersand (앰퍼샌드)	&amp;	&#38;
"	Double quotation (큰따옴표)	&quot;	&#34;
'	Single quotation (작은따옴표)	&apos;	&#39;
(공백)	Non-breaking space (공백)	&nbsp;	&#160;

적용 예시

HTML 코드 예제를 블로그에 적고 싶을 때 다음과 같이 작성합니다.

• 잘못된 예시: <div>내용</div> (브라우저가 실제 태그로 인식함)
• 올바른 예시: &lt;div&gt;내용&lt;/div&gt;
• 화면 출력 결과: <div>내용</div>

3. 자주 쓰는 정보성 및 통화 기호

저작권 표시나 화폐 단위를 정확하게 표기할 때 유용합니다.

기호의미엔티티 이름엔티티 번호

©	Copyright (저작권)	©	©
®	Registered (등록상표)	®	®
™	Trademark (상표)	™	™
₩	Won (원화)	¥	₩
$	Dollar (달러)		$
€	Euro (유로)	€	€
£	Pound (파운드)	£	£

4. 수학 및 화살표 기호

복잡한 수식이나 방향을 나타낼 때 사용합니다.

수학 기호

기호의미엔티티 이름엔티티 번호

×	곱하기	×	×
÷	나누기	÷	÷
±	플러스 마이너스	±	±
≠	같지 않음	≠	≠
≤	작거나 같음	≤	≤
≥	크거나 같음	≥	≥
∞	무한대	∞	∞

화살표 기호

기호방향엔티티 이름엔티티 번호

←	왼쪽	←	←
↑	위쪽	↑	↑
→	오른쪽	→	→
↓	아래쪽	↓	↓
↔	좌우	↔	↔

5. 실무 활용 팁

1) 연속된 공백 넣기

HTML에서는 스페이스바를 여러 번 눌러도 한 칸의 공백만 인식됩니다. 여러 칸을 띄우고 싶다면 &nbsp;를 연속해서 사용하세요.

• 입력: 공백&nbsp;&nbsp;&nbsp;세 칸
• 출력: 공백 세 칸

2) 문장 기호의 조화

따옴표 안의 따옴표를 표현하거나 특수한 문장 부호를 쓸 때 유용합니다.

• 나열 기호: &bull; (•)
• 가운뎃점: &middot; (·)

3) 수식 표현 (LaTeX 병행)

웹에서 더 정교한 수식을 표현해야 할 때는 엔티티 대신 LaTeX 문법을 사용하기도 합니다.

• 예: $\sqrt{a^2 + b^2} = c$

HTML 엔티티는 웹 표준의 기초이면서도 실수를 줄여주는 중요한 도구입니다. 자주 사용하는 코드는 메모해 두거나 이 게시물을 참고하여 필요할 때마다 활용해 보세요.