[HTML] TIL6 : 엔티티의 종류 / 의미론적 태그의 역할

---

▣ HTML Entities

앞서 배운 메타 태그에서 HTML 문서를 인코딩하는 데 사용되는 특정 문자 세트(Character set)를 설정하는 속성이 charset이라고 하였습니다. 이때의 값 UTF-8(Unicode Transformation Format–8-bit), 통칭 유니코드(Unicode)가 인코딩에 사용되는 문자 세트인 것입니다.

 

<meta charset="UTF-8">

 

현재는 대부분의 브라우저가 유니코드를 지원하지만 과거에는 그렇지 않았습니다. 정해진 문자 세트 이외의 문자를 사용해야 할 경우에는 미리 약속된 예약 문자(Reserved characters)들을 사용해야 하는데 이때 사용된 것이 HTML 엔티티입니다.

몇 가지 유용한 경우를 제외하고 개발자가 아니라면 몰라도 크게 문제가 되지 않을 정도로 요즘 코드 편집기와 브라우저는 다양한 특수 문자와 기호들을 지원하고 있습니다. 다만 보안상의 이유나 실행 환경에 따른 브라우저 문제 발생 등의 이유로 좀 더 엄격한 실행을 원하는 경우에 긴요하게 활용됩니다.

 

---

□ Non breaking space

<!-- Non Breaking Space : Entity Name -->
<p>Hello, my name is        John.</p>
<p>Hello, my name is &nbsp; John.</p>
<p>Hello, my name is &nbsp; &nbsp; &nbsp; John.</p>

 

 

위의 경우 첫째 줄 코드에서 아무리 스페이스바를 이용하여 공백을 생성하여도 띄어쓰기가 되지 않습니다. 이럴 경우에 사용하는 것이   입니다. 엔티티의 기본 형태를 살펴보면 특수 문자 '&'와 ';'를 좌우에 배치하고 그 안에 엔티티의 이름을 문자로 입력한 것입니다.

'엔티티 이름'은 주로 알아보기 쉬운 축약어의 형태로 되어 있어 쉽게 익힐 수 있습니다. 다만 모든 브라우저가 엔티티 이름을 지원하지는 않으므로 이럴 경우에는 '엔티티 숫자'인   를 사용해야 합니다. 엔티티 숫자의 기본 형태는 '&#'와 ';' 사이에 할당된 숫자를 입력하는 것입니다. 따라서 아래의 코드를 브라우저에서 보면 위 실행결과의 둘째 줄과 동일합니다.

 

<!-- Non Breaking Space : Entity Number -->
<p>Hello, my name is &#160; John.</p>

 

---

□ Less than, Greater than, Ampersand

<!-- Less Than & Greater Than : Entity Name -->
<p> 5 < 2</p>
<p> 5 > 2</p>
<p> 5 &lt; 2</p>
<p> 5 &gt; 2</p>

 

'<' 와 '>' 는 비교 연산자(Comparison Operator)이지만, HTML 문서에서 태그로 사용될 수도 있기 때문에 엔티티를 이용하여 표시할 때 좀 더 명확하고 안전한 코드가 됩니다. 이후에 기타 태그의 예시에서 살펴보겠지만 <code> 태그 안에 HTML 요소들을 작성하는 경우에도 유용합니다.

위의 코드는 '<' 와 '>' 를 기호 그대로 입력했을 때와 엔티티 이름 &lt; 와 &gt; 으로 표시했을 때의 예시이며, 현재 브라우저에서 특수 문자의 입력을 지원하므로 결과는 아래와 같이 동일한 것처럼 보입니다. 하지만 '<' 를 자세히 살펴보면 코드의 색깔이 '>' 와 다른데, 이는 브라우저가 개발자의 의도인 '~보다 작다'라는 의미가 아니라 'HTML 태그가 시작됨'으로 해석하고 있기 때문입니다.

이와 비슷한 사례로 '&(Ampersand)'가 있습니다. '그리고(And)'라는 의미로 자주 사용되는 기호이지만, 브라우저는 이를 'HTML 엔티티가 시작됨'으로 해석하기 때문에 &amp; 으로 표시하는 것이 적확한 코드입니다.

 

 

'<' 와 '>' 의 엔티티 숫자는 각각 &60; 와 &62; 입니다. 따라서 아래와 같이 나타낼수도 있습니다.

 

<!-- Less Than & Greater Than : Entity Number -->
<p> 5 &60; 2</p>
<p> 5 &62; 2</p>

 

---

□ 기타 엔티티

<!-- Copyright -->
<p>Copyright &copy;</p>

<!-- Registerd Trademark -->
<p>Registerd Trademark &reg;</p>

<!-- Currency -->
<p>Cent &cent;</p>
<p>Pound &pound;</p>
<p>Euro &euro;</p>

<!-- Card Suits -->
<p>Spades &spades;</p>
<p>Diamonds &diams;</p>
<p>Hearts &hearts;</p>
<p>Clubs &clubs;</p>

 

이외에 저작권(Copyright), 등록 상표(Registered Trademark), 화폐 단위(Currency), 포커카드 세트(Card suits)의 그림 등을 엔티티로 표시할 수 있습니다.

 

 

---

반응형

---

 

▣ Semantic Tag

의미론적 태그는 HTML 문서의 구역 분할과 윤곽의 개요를 보여줌과 동시에 태그 안에 있는 컨텐츠가 어떤 것임을 명백하게 정의하여 브라우저 또는 개발자에게 알려주는 역할을 합니다. 반면에 비의미론적 태그는 태그의 이름만 봐서는 컨텐츠가 어떤 내용인지 알기 어렵습니다. 대표적인 의미론적 태그는 <form>, <table>, <header>, <nab>, <section>, <article>, <aside>, <footer> 등이며, 비의미론적 태그로는 <div>, <span>, <b>, <i> 등이 있습니다.

 

 ------------------------------------------
  <header>
  - <nab> navigation bar
  - <h1> page title
 ------------------------------------------
  <section>                     ----------   
  - <h2> post title            |  
 ---------------------------   |
|     <article>             |  |
|     - <h3> article title  |  | 
|     - <p> content         |  |  <aside>   
 ---------------------------    ----------
 ------------------------------------------
  <footer>
  - copyright info
 ------------------------------------------

 

---

 

▣ 기타 태그

 

---

□ <code>

<!-- Computer Code -->
<code>
  &lt;!-- HTML --&gt;
  <br>
  &lt;div&gt;Hello&lt;/div&gt;
  <br>
  &lt;!-- Python --&gt;
  <br>
  print('Hello)
</code>

 

<code> 태그는 컴퓨터 코드를 보여주고자 할 때 사용합니다. 특히 태그 안에 HTML 요소를 작성할 경우에는 '<>' 기호를 엔티티로 작성해야 브라우저에서 볼 수 있습니다.

 

※ 대부분의 브라우저에서 <code> 태그의 기본 스타일 설정은 아래와 같습니다.

code {
  font-family: monospace;
}

 

---

□ <kbd>

<!-- Keyboard Input -->
<p>
  Save the file by pressing <kbd>Command + S</kbd>
</p>

 

<kbd> 태그는 키보드 입력을 브라우저에서 보여주고자 할 때 사용합니다.

 

 

※ 대부분의 브라우저에서 <code> 태그의 기본 스타일 설정은 아래와 같습니다.

kbd {
  font-family: monospace;
}

 

---

□ <pre>

<!-- Preserve -->

<pre>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
Neque quisquam voluptas iure ipsam rem dolore ea, accusamus 
magni adipisci aspernatur.</pre>

<pre>
    &lt;!-- HTML --&gt;
    &lt;div&gt;Hello&lt;/div&gt;
    &lt;!-- Python --&gt;
    print('Hello')
</pre>

 

<pre> 태그는 태그 안의 컨텐츠를 코드 편집기에서 보이는 그대로 브라우저에서 보여줍니다. 빈 공백과 줄 바꿈 모두 있는 그대로 보존(Preserve)합니다. 단 '<>' 기호는 엔티티로 작성해야 브라우저에서 볼 수 있습니다.

 

 

※ 대부분의 브라우저에서 <pre> 태그의 기본 스타일 설정은 아래와 같습니다.

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

 

---

여기까지 기타 태그들을 살펴봤을 때 공통점이 한 가지 있습니다. 그것은 미리 정해진 형식이 있는 텍스트(Preformatted text)라는 점이고 특히 그중에서도 font-family 속성의 값이 monospace라는 것입니다. 모노스페이스 폰트에 관해서는 링크를 참조하길 바랍니다.

 

---