IT 성장일기

[HTML] HTML 텍스트 요소를 정리해 보자 - Character Set 과 Entity 문자 본문

Learning/HTML

[HTML] HTML 텍스트 요소를 정리해 보자 - Character Set 과 Entity 문자

고 양 2023. 10. 20. 17:56
반응형
HTML 텍스트 요소를 정리해 보자 - Character Set과 Entity 문자

 

Character Set (문자셋)

 

문자셋은 HTML 문서가 문자를 표시하는 일종의 인코딩 방식입니다.
문자셋은 여러 종류가 존재하며 각각 표현할 수 있는 문자의 수와 종류가 다릅니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8"/>
    <title>Page Title</title>
<head>


<body>
 ... 중략
</body>

</html>

현재 대표적으로 아래와 같은 문자셋이 사용됩니다.

  • ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.
  • ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.
  • ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.
  • UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.

예를 들어 UTF-8로 작성된 문서를 ANSI 인코딩을 사용하여 읽으려 한다면 문자가 깨져 보이는 경우가 발생하기도 합니다.
따라서 HTML 문서에서 표현하고자 하는 텍스트를 정확하게 표시하기 위해서는
<head> 태그 내에 <meta> 태그를 이용해 문자셋을 명시해 주는 것이 좋습니다.

 

 

Entity

 

HTML 문서에는 HTML이 내용을 표현하기 위해 예약해 둔 문자가 있으며 예약어 (Reserved characters)라고 부릅니다.
예약어를 그대로 사용하면 웹 브라우저가 HTML 문서를 작성자의 의도와는 다르게 표현하는 경우가 발생합니다.

'' 태그가 어떤 역할을 하는지 아시나요?
<div>'<b>' 태그가 어떤 역할을 하는지 아시나요?</div>
/*의도했던 문장 : '<b>'태그가 어떤 역할을 하는지 아시나요?*/


특히 HTML에서 태그를 이루는 꺽쇠 괄호의 경우 문자 그대로 사용하게 되면 제대로 표시되지 않는 경우가 많습니다.
또는 여러 번의 띄어쓰기는 모두 생략되어 한 번의 띄어쓰기로 표현 되는 경우도 있습니다.

HTML 문서에서 이런 특수한 문자를 표현하기 위해 Entity를 사용합니다.

 

Entity의 형태는 아래와 같습니다.

&Entity이름;
&Entity숫자;

 

Entity의 종류는 정말이지 너무 다양해서 자주 사용되는 대표적인 몇 가지만 골라보겠습니다.

Entity Entity 이름 Entity 숫자 설명
  &nbsp; &#160; 공백 (스페이스바)
< &lt; &#60; 왼쪽 꺽쇠 괄호
> &gt; &#62; 오른쪽 꺽쇠 괄호
[ &lbrack; &#91; 왼쪽 대괄호
] &rbrack; &#93; 오른쪽 대괄호
& &amp; &#38; AND 기호
" &qout; &#34; 큰따옴표
' &apos; &#39; 작은따옴표

 

아까 예로 들었던 문장을 Entity를 이용해서 의도한 대로 표시해보겠습니다.

'<b>'태그가 어떤 역할을 하는지 아시나요?

<p>'&lt;b&gt;'태그가 어떤 역할을 하는지 아시나요?</p>

 

 

또한 Entity의 이름은 실제 기호의 명칭과도 관련이 있습니다.

lt : less than, <

gt : greater than, >

amp : ampersand, &

apos : apostrophe, '

<p><abbr title="less than">lt</abbr> : <b>l</b>ess <b>t</b>han, &lt;</p>
<p><abbr title="greater than">gt</abbr> : <b>g</b>reater <b>t</b>han, &gt;</p>
<p><abbr title="ampersand">amp</abbr> : <b>amp</b>ersand, &amp;</p>
<p><abbr title="apostrophe">apos</abbr> : <b>apos</b>trophe, &apos;</p>

 

 

Entity 코드 그대로 표현하기

 

때로 HTML 문서에 '&amp;'와 같은 텍스트를 텍스트 그대로 표시해야 할 때에는 이렇게도 표시할 수 있습니다.

조금 복잡하지만 Entity의 맨 앞글자 '&'를 Entity로 변경하는 것입니다.

&apos; 라고 입력하면 작은따옴표(') 기호가 표시됩니다. 신기하지 않나요?

<p>&amp;apos; 라고 입력하면 작은따옴표(') 기호가 표시됩니다. 신기하지 않나요?</p>

 

 

복잡한 Entity문자가 조금 더 편하게 다가오는 것처럼 느껴지는 것 같습니다.

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/

반응형
저작자표시 비영리 변경금지

'Learning > HTML' 카테고리의 다른 글

[HTML] HTML 문서에 링크와 이미지 삽입하기  (1) 2023.11.02
[HTML] HTML 요소에 스타일을 적용해보자  (0) 2023.10.27
[HTML] HTML 텍스트 요소를 정리해 보자 - 축약어와 주소  (0) 2023.10.20
[HTML] HTML 텍스트 요소를 정리해 보자 - 주석과 인용구  (0) 2023.10.05
[HTML] HTML 텍스트 요소를 정리해 보자 - 서식  (2) 2023.10.04
'Learning/HTML' Related Articles more