HTML 태그 정리: hr, br, sup, sub

HTML 태그 정리: <hr>, <br>, <sup>, <sub>

1. <hr> — 수평선(Horizontal Rule)

(1) 정의

• <hr> 태그는 문단 사이에 수평선을 삽입할 때 사용합니다.
• 주로 내용 구분, 시각적인 단락 분리 용도로 사용됩니다.

(2) 특징

• 빈 태그(Empty tag): 닫는 태그(</hr>)가 없습니다.
• 브라우저가 기본 스타일을 적용해서 가로줄이 표시됩니다.
• CSS로 굵기, 색상, 스타일을 조정할 수 있습니다.

(3) 예시

<p>첫 번째 문단입니다.</p>
<hr>
<p>두 번째 문단입니다.</p>

출력 결과:

첫 번째 문단입니다.

---

두 번째 문단입니다.

---

2. <br> — 줄바꿈(Line Break)

(1) 정의

• <br> 태그는 강제 줄바꿈을 할 때 사용합니다.
• 시각적으로 엔터(Enter)를 친 것과 같은 효과를 줍니다.

(2) 특징

• 마찬가지로 빈 태그입니다.
• 문단 전체를 나누는 <p>와는 달리, 줄을 강제로 끊는 용도입니다.

(3) 예시

안녕하세요.<br>
반갑습니다.<br>
즐거운 하루 되세요.

출력 결과:

안녕하세요.
반갑습니다.
즐거운 하루 되세요.

---

3. <sup> — 위 첨자(Superscript)

(1) 정의

• <sup> 태그는 글자를 위 첨자(작게 위쪽)에 표시합니다.
• 수학의 지수, 각주 번호 등에 자주 사용됩니다.

(2) 예시

E = mc<sup>2</sup>

출력 결과:

E = mc²

👉 여기서 2가 위 첨자로 표시됩니다.

---

4. <sub> — 아래 첨자(Subscript)

(1) 정의

• <sub> 태그는 글자를 아래 첨자(작게 아래쪽)에 표시합니다.
• 화학식, 수학의 변수 표기 등에 사용됩니다.

(2) 예시

H<sub>2</sub>O

출력 결과:

H₂O

👉 2가 아래 첨자로 표시되어 물 분자를 나타냅니다.

---

5. 네 가지 태그 비교

태그	의미	용도	예시
<hr>	수평선	문단 구분	문단1 <hr> 문단2
<br>	줄바꿈	텍스트 강제 개행	안녕 <br> 반가워
<sup>	위 첨자	지수, 각주	x<sup>2</sup>
<sub>	아래 첨자	화학식, 수식	H<sub>2</sub>O

---

6. 정리

• <hr> → 내용 구분용 가로줄
• <br> → 강제 줄바꿈
• <sup> → 위 첨자 (수학 지수, 각주)
• <sub> → 아래 첨자 (화학식, 변수)