[HTML] 4강 텍스트 태그

텍스트 태그란?

 보통 웹문서들은 텍스트들의 집합으로 이루어져 있습니다.

 이러한 텍스트들의 집합을 좀더 쉽게 편집하고 제어하기 위해 쓰이는 태그를 텍스트 태그라고 합니다.

 대표적으로 <b>, <strong>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 등이 있습니다.

---

볼드체(Bold) 텍스트 태그

 텍스트 중 글씨를 굵게 만들기위해 보통 <b>태그와 <strong> 태그를 사용합니다.

 하지만, <b>와 <strong> 태그 사이에는 차이가 존재 합니다.

 <strong> 태그는 강조를 하기 위해 사용되고, <b> 태그는 글씨의 굵기를 단순히 굵게하기 위해 사용됩니다.

 이에 따라 스크린리더 기능 사용시 차이가 나기도 합니다. 

* 스크린리더는 <strong> 태그만 판독 가능합니다

 

ex) strong태그 예제

<strong>strong태그 예제</strong>

 

ex) b태그 예제

<b>b태그 예제</b>

---

이탤릭체(Italic) 텍스트 태그

 비스듬한 텍스트를 표현하고 싶을 때는 <em>태그와 <i>태그를 사용합니다.

 이탤릭체 태그도 마찬가지로 강조를 위해선 <em>태그를 단순한 이탤릭체 표시를 위해선 <i>태그를 사용합니다.

 스크린 리더 기능 사용시 차이도 볼드체태그와 동일합니다.

* 스크린리더는 <em> 태그만 판독 가능합니다

 

ex) em태그 예제

<em>em태그 예제</em>

ex) i태그 예제

<i>i태그 예제</i>

---

형광펜 효과 텍스트 태그

 형광펜으로 밑줄을 그은듯한 효과를 내기 위해서는 <mark> 태그를 사용합니다. 

 * HTML5에 해당하는 태그이며, 하위버전에서는 CSS를 이용합니다

ex)

mark태그 예제

입니다

<mark>mark태그 예제</mark>입니다

---

문자 위의 주석 텍스트 태그

 텍스트를 사용하다보면 문자 바로 위에 주석을 써야 되는 경우가 있습니다. ex) 일본어의 히라가나 표기

 그런 경우에는 <ruby>태그를 사용합니다.

ex)

ruby루비

태그 예제입니다

<ruby>ruby<rt>루비</rt></ruby>태그 예제입니다

---

약자 표시 텍스트 태그

약자로 표시된 단어의 원래 뜻을 표현 하고자 할 때는 <abbr> 태그를 사용합니다.

 태그를 사용한 후 약자에 마우스 커서를 가져가면 원래 뜻이 나옵니다.

ex)

OS

은 운영체제입니다

<abbr title="Operating Systemm">OS</abbr>은 운영체제입니다

---

참고내용 표시 텍스트 태그

 참고 내용을 표시 할 때는 <cite> 태그를 사용합니다.

 보통 책, 영화,그림 등의 작품이름을 표시하거나 인용할 때 쓰입니다.

ex)

작품이름을 위한 cite

태그 예제입니다

<cite>작품이름을 위한 cite</cite>태그 예제입니다

---

컴퓨터 코드(인식을 위한) 텍스트 태그

 컴퓨터 코드를 텍스트로 표현할 때는 <code> 태그를 사용합니다.

ex) 컴퓨터 용어용 code 태그사용예제

<code>컴퓨터 용어용 code</code> 태그사용예제

---

사용자(키보드) 입력 정의 텍스트 태그

 사용자가 입력하는 키보드를 정의할 때 <kbd> 태그를 사용합니다.

 특별한 기능없이 태그의 용도 정도만 나타내는 특징이 있습니다.

ex) 

키보드 정의 kbd

 태그사용예제 

<kbd>키보드 정의 kbd</kbd> 태그사용예제

---

부가정보 표시(작은) 텍스트 태그

 작은 텍스트로 부가정보를 표시하고자 할때 <small> 태그를 사용합니다.

ex)

small

태그사용예제

<small>small</small>태그사용예제

---

아래 첨자 텍스트 태그

 텍스트에 아래 첨자를 넣을 때는 <sub> 태그를 사용합니다.

ex)_sub태그사용예제

_sub태그사용예제

---

위 첨자 태그

 텍스트에 위 첨자를 넣을 때는 <sup> 태그를 사용합니다.

ex)^sup태그사용예제

^sup태그사용예제

---

취소선 텍스트 태그

 텍스트 중간에 취소선과 같은 줄을 그을 때는 <s> 태그를 사용합니다.

ex) s태그 예제

<s>s태그 예제</s>

---

밑줄 텍스트 태그

 텍스트에 하단에 밑줄을 그을 때는 <u> 태그를 사용합니다.

ex) u태그 예제

<u>u태그 예제</u>

---

제목 텍스트 태그

 보통 제목에 사용되는 텍스트는 크고 진하게 표시를 많이 하게 됩니다.

 그럴 때 사용되는 태그가 바로 <h1>부터 <h6>까지의 태그입니다. 번호가 커질수록 글자는 작게 표시됩니다.

ex) h1태그 예제

<h1>h1태그 예제</h1>

ex) h2태그 예제

<h2>h2태그 예제</h2>

ex) h3태그 예제

<h3>h3태그 예제</h3>

ex) h4태그 예제

<h4>h4태그 예제</h4>

ex) h5태그 예제

<h5>h5태그 예제</h5>

ex) h6태그 예제

 

<h6>h6태그 예제</h6>

 

---

지금까지 텍스트 태그에 대해 알아봤습니다.

 다음 강의에서는 텍스트 내의 문단이나 형식을 이루는 태그에 대해 알아보겠습니다.