[HTML] 개념 정리 2 :: HTML 문자 태그

HTML 문자 태그 알아보기

HTML은 텍스트의 크기와 스타일을 조정하거나 정렬을 설정하는 다양한 태그를 제공함. 이러한 태그를 사용하면 텍스트를 강조하거나 구조화하여 보다 읽기 쉬운 콘텐츠를 만들 수 있음.

---

텍스트 크기 및 스타일 태그

1. <h1> ~ <h6>: 제목 태그

<h1>에서 <h6>까지 제공되며, 숫자가 작을수록 크기가 큼. 웹페이지의 구조를 잡고 중요한 내용을 강조하는 데 사용함.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>

• <h1>: 가장 큰 제목
• <h6>: 가장 작은 제목

2. <b>: 굵은 글씨

텍스트를 굵게 표시함. 콘텐츠를 강조할 때 사용함.

<b>강조된 텍스트</b>

3. <i>: 기울임꼴

텍스트를 기울임꼴로 표시함. 특별한 용어, 외국어, 제목 등을 강조할 때 사용.

<i>이탤릭 텍스트</i>

4. <u>: 밑줄

텍스트에 밑줄을 추가함. 추가적인 강조를 위해 사용됨.

<u>밑줄 텍스트</u>

5. <sub>: 아래첨자

텍스트를 아래로 내려 표시함. 화학식, 수학 공식 등에 주로 사용.

H<sub>2</sub>O

6. <sup>: 위첨자

텍스트를 위로 올려 표시함. 제곱, 순번 등에 사용.

x<sup>2</sup>

7. <small>: 작은 텍스트

기본 텍스트보다 크기가 작은 텍스트를 표시함.

<small>작은 텍스트</small>

8. <big>: 큰 텍스트

기본 텍스트보다 크기가 큰 텍스트를 표시함.

<big>큰 텍스트</big>

---

정렬 태그

텍스트나 요소를 특정 방향으로 정렬하기 위해 사용되는 태그들.

1. <div align="...">

align 속성을 이용해 텍스트나 콘텐츠를 왼쪽(left), 가운데(center), 오른쪽(right) 정렬할 수 있음.

<div align="center">가운데 정렬된 텍스트</div>
<div align="right">오른쪽 정렬된 텍스트</div>

2. <center> (HTML5에서는 비추천)

텍스트를 중앙에 정렬할 때 사용. 하지만 HTML5부터는 더 이상 권장되지 않으며, 대신 CSS를 사용할 것을 권장함.

<center>가운데 정렬된 텍스트</center>

---

결론

HTML 문자 태그는 텍스트의 크기, 스타일, 정렬을 조정하는 데 필수적임. <h1> ~ <h6> 태그로 제목 구조를 잡고, <b>, <i>, <u> 등으로 강조하거나 스타일을 지정하며, <div>와 <center>를 활용해 콘텐츠를 정렬할 수 있음. 이러한 태그를 조합하면 더욱 효과적이고 세련된 웹페이지를 구성할 수 있음.