HTML 텍스트 스타일링 태그: 텍스트에 옷을 입혀보세요!

 웹 페이지에서 텍스트는 정보를 전달하는 가장 중요한 요소 중 하나입니다. 밋밋한 텍스트는 가독성을 떨어뜨리고 사용자의 흥미를 잃게 만들 수 있습니다. HTML에서는 다양한 텍스트 스타일링 태그를 제공하여 텍스트를 강조하고, 시각적으로 표현하고, 의미를 더할 수 있도록 도와줍니다.

 

이번 포스팅에서는 자주 사용되는 텍스트 스타일링 태그들을 살펴보고, 예시를 통해 각 태그의 활용법을 알아보겠습니다.

 

 

1. 굵게 표시하기: <b> vs <strong>

<b> 태그는 텍스트를 굵게 표시합니다.

<b>이 텍스트는 굵게 표시됩니다.</b>

결과

이 텍스트는 굵게 표시됩니다.

 

 

<strong>이 텍스트는 중요합니다!</strong>

결과

이 텍스트는 굵게 표시됩니다.

 

SEO 관점에서는 <strong> 태그를 사용하는 것이 더 유리합니다.

 

 

---

 

2. 기울임꼴 표시하기: <i> vs <em>

<i> 태그는 텍스트를 기울임꼴로 표시합니다. 주로 기술 용어, 외국어 표현, 생각 등을 나타낼 때 사용합니다.

<i>Homo sapiens</i>는 인류의 학명입니다.

결과

Homo sapiens는 인류의 학명입니다.

 

 

<em>정말 중요한 내용입니다!</em>

결과

정말 중요한 내용입니다!

 

 

---

 

3. 밑줄 긋기: <u>

<u> 태그는 텍스트에 밑줄을 긋습니다. 하지만 링크를 나타내는 <a> 태그와 혼동될 수 있으므로, 가급적 다른 스타일링 태그를 활용하는 것이 좋습니다.

<u>밑줄이 그어진 텍스트입니다.</u>

결과

밑줄이 그어진 텍스트입니다.

 

 

---

 

4. 위 첨자와 아래 첨자: <sup> & <sub>

<sup> 태그는 텍스트를 위 첨자로 표시합니다. 주로 수학 공식이나 각주를 표현할 때 유용합니다.

E=mc<sup>2</sup>

결과

E=mc²

 

 

<sub> 태그는 텍스트를 아래 첨자로 표시합니다. 화학식이나 수학 공식에서 아래 첨자를 표현할 때 사용합니다.

H<sub>2</sub>O

결과

H₂O

 

 

---

 

5. 고정 폭 글꼴: <pre> & <code>

<pre> 태그는 preformatted text를 의미하며, 입력한 그대로의 형식을 유지합니다. 공백, 줄 바꿈 등이 모두 그대로 표시됩니다. 주로 코드 블록이나 시를 표현할 때 사용합니다.

<pre>
This is 
an example of 
preformatted text.
</pre>

결과

This is 
an example of 
preformatted text.

 

 

<code> 태그는 컴퓨터 코드를 표시할 때 사용합니다. 일반적으로 고정 폭 글꼴로 표시됩니다.

<code>print("Hello, world!")</code>

결과

print("Hello, world!")

 

 

---

 

6. 키보드 입력: <kbd>

<kbd> 태그는 사용자가 키보드로 입력해야 하는 텍스트를 표시합니다. 주로 사용자 매뉴얼이나 튜토리얼에서 특정 키를 눌러야 하는 경우에 사용합니다.

<kbd>Ctrl</kbd> + <kbd>C</kbd>를 눌러 복사하세요.

결과

Ctrl + C를 눌러 복사하세요.

 

 

---

 

마무리

이 외에도 다양한 HTML 텍스트 스타일링 태그가 존재합니다. 이러한 태그들을 적절히 활용하면 웹 페이지의 가독성을 높이고 정보 전달력을 향상시킬 수 있습니다.

 

주의: HTML5에서는 스타일링을 위해 CSS를 사용하는 것을 권장합니다. 하지만 간단한 스타일링의 경우 HTML 태그를 사용하는 것이 더 효율적일 수 있습니다.

 

HTML 순서대로 배우기