텍스트 관련 요소

✌ 텍스트 요소는 크게 두가지로 나눌 수 있습니다.

어떤 것이 있는 지 함께 알아볼까요 ?

 

1. 물리적(Physical) 태그

⁘ 텍스트가 화면에 출력되는 형식을 지정하는 태그

 

소스	설명	화면출력
<i>텍스트</i>	기울임 글꼴(Italics)	텍스트
<b>텍스트</b>	굵은 글꼴(Bold)	텍스트
<tt>텍스트</tt>	타자기 글꼴(Teletype)	텍스트
<u>텍스트</u>	밑줄친 글꼴(Underline)	텍스트
<s>텍스트</s>	취소선(Strikethrough)	텍스트
<strike>텍스트</strike>	취소선(Strikethrough)	텍스트
<sub>텍스트</sub>	아래첨자(Subscript)	텍스트
<sup>텍스트</sup>	위첨자(Superscript)	텍스트
<big>텍스트</big>	크게, Bigger font (one size bigger)	텍스트
<small>텍스트</small>	작게, Smaller font (one size smaller)	텍스트

 

물리적 태그중에서 많이 쓰이는 태그는 <b>, <u> 정도가 있습니다.

👆🏻 물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 결정합니다.

 

2. 논리적(Logical) 태그

물리적 태그가 텍스트가 화면에 어떻게 출력될것인가를 결정하는 반면

👆🏻 논리적 태그는 화면에 출력되는 형식보다는 태그 자체가 의미를 가지고 있는 태그입니다.

 

소스	설명	화면출력
<abbr>텍스트</abbr>	Abbreviation (for example, Mr.)	텍스트
<acronym>텍스트</acronym>	Acronym (for example, WWW)	텍스트
<cite>텍스트</cite>	인용(Citation)	텍스트
<code>텍스트</code>	코드(Code listing)	텍스트
<dfn>텍스트</dfn>	Definition	텍스트
<em>텍스트</em>	강조(Emphasis)	텍스트
<kbd>텍스트</kbd>	Keystrokes	텍스트
<q>텍스트</q>	Inline quotation	텍스트
<samp>텍스트</samp>	Sample text (example)	텍스트
<strong>텍스트</strong>	강한 강조(Strong emphasis)	텍스트
<var>텍스트</var>	변수(Programming variable)	텍스트

 

화면 출력 부분을 보시면 기울임 글꼴이나 굵은 글꼴 외에 특별한 형태로 출력되는 것은 없습니다.

⁂ 단지 이 텍스트가 어떤 성격인지 규정하는 역할을 합니다.

 

HTML을 처음 배울 때 CSS를 모르는 상태이기 때문에 논리적 태그보다 물리적 태그를 더 많이 사용합니다.

그러나 HTML 태그의 성격은 화면에 출력하는 형태를 규정한다기보단 🙌텍스트의 의미🙌를 중시합니다.

예를들면 <b> 태그 <strong> 태그 둘다 화면에서는 굵은 텍스트로 표시됩니다.

그러나 이 두가지 태그는 그 의미가 다릅니다.

 

✔ <b> 태그는 bold의 약자로 단순히 텍스트를 굵게 표시하라는 의미를 가지고,

<strong> 태그는 강조의 의미를 가집니다. 
태그로 둘러싸인 텍스트가 중요하다는 의미입니다. ✔

 

 

✨ 결론 ! 

물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 결정합니다.

논리적 태그는 화면에 출력되는 형식보다는 태그 자체가 의미를 가지고 있는 태그입니다.

의미있는 HTML문서를 만들기 위해서는 물리적태그(태그) 보다는 논리적 태그(태그)를 중점적

으로 사용해야 합니다.