[HTML] 엔티티 코드 (Entity Code)

엔티티 코드 (Entity Code)

 

엔티티 코드(Entity Code)란 HTML 예약어나 특수문자를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋이다.

HTML 예약어를 그대로 사용하게 되면 웹 브라우저에서 다른 의미로 해석될 수 있기 때문에 꼭 알아두어야 한다.

 

엔티티 코드, 꼭 써야하나?

 

다음은 엔티티 코드를 사용하지 않고 HTML 예약어와 혼용하여 작성한 경우이다.

< > 를 Entity Code로 작성하지 않았을 떄

p 태그를 분명히 잘 열고 닫았는데 브라우저는 앞에서부터 읽기 때문에 <를 여는 태그로 인식해버리는 것을 볼 수 있다.

그렇다면 이번에는 < > 를 엔티티 코드로 바꿔서 작성하면 잘 되는지 확인해보자.

빨간 줄 어디갔어요?

< 는 &lt; 로, > 는 &gt;로 바꿔서 작성하니까 오류가 바로 사라지는 것을 확인할 수 있다.

웹 페이지를 개발하다보면 HTML 태그 안에 < >(괄호)를 써야하는 경우가 간혹 있는데

&lt; 와 &gt; 정도는 외워두는 것도 좋을 것 같다.

 

실무에서는 주로 뭘 쓸까?

 

문자	엔티티 코드 (Entity Code)	설명
<	&lt;	여는 괄호
>	&gt;	닫는 괄호
	&nbsp;	공백
&	&amp;	and (그리고)
©	&copy;	저작권
·	&middot;	중간 목록 점

엔티티 코드는 종류가 많지만 실무에서는 위의 여섯 가지 코드를 주로 사용한다.

이외에도 다양한 엔티티 코드들이 있는데 아래 표와 사이트를 참고하길 바란다.

 

문자	엔티티 코드 (Entity Code)	설명
"	"	인용
“	“	큰따옴표 열기
”	”	큰따옴표 닫기
‘	‘	작은따옴표 열기
’	’	작은따옴표 닫기
·	•	큰 목록 점
×	×	곱셈 기호
÷	÷	나눗셈 기호
−	−	마이너스 기호
♠	♠	스페이드
♣	♣	클로버
♥	♥	하트
♦	♦	다이아몬드

https://entitycode.com/

Entity Code - A Clear and Quick Reference to HTML Entities Codes

 

에필로그: 엔티티 코드를 잘못 쓴 경우

 

필자는 퍼블리셔로서 엔티티 코드와 CSS(Cascading Style Sheets)에 대한 이해도가 있었기 때문에 이런 실수는 해본 적이 없지만,

종종 엔티티 코드가 뭔지 알고 계시지만 CSS에 대한 이해도가 없어서 잘못 사용하는 개발자분들을 발견하곤 한다.

 

이 글을 읽는 당신께서 '혹시 난가?' 싶다면 다음 문제를 같이 풀어보자.

코딩 테스트

---

.

.

.

.

.

.

.

.

.

.

 

정답 공개 전에 오답 공개

 

<p>사람을 화나게 하는 방법에는 두 가지 방법이 있는데<br>
하나는 말을 하다가 마는 것이고&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>...</p>

 

정말 신박한 방법이었다.

p태그(단락 태그)와 p태그 사이에 간격을 만들고 싶었던 모양이다.

간격이란 간격을 &nbsp;로 만들어주신 덕분(?)에 하나하나 찾아서 지워주고 아래처럼 바꿔주어야 했다.

 

<p style="margin-bottom: 40px;">사람을 화나게 하는 방법에는 두 가지 방법이 있는데<br>
하나는 말을 하다가 마는 것이고</p>
<p>...</p>

 

&nbsp;는 공백을 나타내는 문자열이긴 하지만, style적인 요소로 쓰이면 안되기 때문에

혹시라도 간격이나 여백을 컨트롤해야 한다면 margin을 사용해야 한다.

 

참고 사이트 : http://www.tcpschool.com/html/html_text_entities

코딩교육 티씨피스쿨