[HTML] HTML Entity 코드로 특수문자 입력하기

📍HTML Entity 코드란?

HTML 문서에서 특정 문자는 특별한 의미를 가지거나 렌더링 되지 않을 수 있습니다.

이런 경우에 HTML 엔터티를 사용하여 해당 문자를 나타냅니다.

예를 들어, '<'나 '>'와 같은 기호는 HTML에서 태그를 나타내는 데 사용되므로 이러한 문자를 일반 텍스트로 표현하려면 HTML 엔터티를 사용해야 합니다. -챗GPT-
 
즉, entity 코드는 일부 특수문자가 HTML에서 오류를 일으키거나 렌더링이 안될 때 사용하는 코드입니다.
대표적으로 공백 코드인 &nbsp;가 있습니다.

 

📍HTML코드와 HTML Entity 코드의 차이

HTML코드는 마크업 언어입니다.

일반적으로는 HTML코드에 특수문자를 직접 넣으면 되지만, 기능을 갖는 일부 특수문자는 Entity 코드를 사용하여 나타냅니다.

이렇듯 HTML Entity 코드는 특수 문자나 예약어를 나타내기 위한 코드입니다.

 

 

📍대표적인 HTML Entity 코드

Symbol	Entity Code	Sign
	 	non-breaking space
<	&lt;	less than
>	&gt;	greater than
»	&raquo;	right-pointing double angle quotation mark
«	&laquo;	left-pointing double angle quotation mark
&	&amp;	ampersand
“	&ldquo;	left double quotation mark
”	&rdquo;	right double quotation mark

---

HTML 코드의 예시를 보겠습니다.

예시 문구는 예를 들어서 <em> 시스템 점검 안내라고 입력을 해볼까요? 입니다.

 

예를 들어서 <em> 시스템 점검 안내라고 입력을 해볼까요?

라고 입력한 결과는 아래와 같습니다.

 

예를 들어서 시스템 점검 안내라고 입력을 해볼까요?

 

'<em>' 부분이 증발되었죠?  

'<'와 '>'이 HTML코드로 인식되어 em 태그(기울임 스타일)로 적용되었습니다

따로 클로징 태그가 없어서 '시스템' 부분부터 아래의 모든 텍스트까지 기울임이 들어간 것을 확인할 수 있습니다.

 

이러한 현상을 막기 위해 사용하는 것이 바로 HTML entity 코드입니다.

아래는 entity 코드를 사용한 블록입니다.

<는 &lt; >는 &gt;입니다.

예를 들어서 <em> 시스템 점검 안내라고 입력을 해볼까요?

 

예를 들어서 <em> 시스템 점검 안내라고 입력을 해볼까요?

 

'<em>' 텍스트가 문자 그대로 출력이 됩니다.

 

 

흔히 쓰이는 &nbsp;도 예시로 들어보겠습니다.

여     백
여     백

여 백| 여     백

 

스페이스바로 만든 공백은 한 번만 적용되기 때문에 2자 이상의 공백을 넣을 때엔 &nbsp;로 넣곤 합니다.

 

위처럼 이슈가 생기는 게 아니면 보통 특수문자는 HTML에 직접 사용 가능합니다.

HTML블록에 두 가지 방식으로 ·를 입력해 보겠습니다.

·의 entity 코드는 &middot; 입니다.

 

 

·를 입력했습니다.
·를 입력했습니다.

 

·를 입력했습니다. ·를 입력했습니다.

 

&middot;이나 ·이나 결과에 차이가 없습니다.

필요시(일부 특수문자가 HTML에서 오류를 일으키거나 렌더링이 안될 때)에 entity 코드를 사용하면 됩니다.