HTML에서 <sub>와 <sup> 태그는 각각 아래 첨자(subscript)와 위 첨자(superscript)를 표시하는 데 사용됩니다. 두 태그는 수학적 표현이나 화학식, 물리학 등에서 자주 사용되며, 텍스트의 일부를 위나 아래로 조정하여 표현할 수 있습니다.
1. <sub> 태그 (아래 첨자)
<sub> 태그는 텍스트를 아래 첨자로 표시하는 데 사용됩니다. 일반적으로 화학식에서 원소의 아랫첨자나, 수학식에서 하단에 위치하는 기호를 표시할 때 사용됩니다.
예시:
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
- 위 예시에서 H<sub>2</sub>O는 물의 화학식을 표시하며, 숫자 2는 아래 첨자 형식으로 표시됩니다.
특징:
- 수학이나 화학 식에서 하단에 작은 숫자나 문자를 표시할 때 유용합니다.
- 글자 크기는 기본 텍스트보다 작고, 위치는 아래로 내려갑니다.
2. <sup> 태그 (위 첨자)
<sup> 태그는 텍스트를 위 첨자로 표시하는 데 사용됩니다. 이 태그는 일반적으로 수학식에서 지수나 첨자, 혹은 복잡한 텍스트에서 위로 위치하는 기호나 숫자를 표시할 때 사용됩니다.
예시:
<p>수학에서 2<sup>3</sup>은 2의 3제곱을 의미합니다.</p>
- 위 예시에서 2<sup>3</sup>은 2의 3제곱을 나타내며, 3은 위 첨자 형식으로 표시됩니다.
특징:
- 수학식에서 지수나 차수를 표시할 때 유용합니다.
- 글자 크기는 기본 텍스트보다 작고, 위치는 위로 올라갑니다.
3. <sub>와 <sup> 태그의 차이점
태그 설명 사용 예시
| <sub> | 아래 첨자로 텍스트를 내려서 표시합니다. | H2O (화학식) |
| <sup> | 위 첨자로 텍스트를 올려서 표시합니다. | 23 (수학식) |
4. 스타일링 예시
<sub>와 <sup> 태그는 기본적으로 글자의 크기를 작게 하고, 위치를 조정합니다. CSS로 추가적인 스타일을 적용할 수 있습니다.
<p>화학식: H<sub style="color: red;">2</sub>O</p>
<p>지수 표현: 2<sup style="color: blue;">3</sup></p>
위 예시에서는 아래 첨자 2를 빨간색으로, 위 첨자 3을 파란색으로 스타일링했습니다.
결론:
- <sub> 태그는 텍스트를 아래 첨자로 표시하는 데 사용되며, 주로 화학식이나 수학적 표현에서 사용됩니다.
- <sup> 태그는 텍스트를 위 첨자로 표시하는 데 사용되며, 수학, 물리학 등에서 지수나 첨자를 나타낼 때 사용됩니다.
- 두 태그는 텍스트의 위치와 크기를 조정하여 특정 정보를 더 명확하게 전달하는 데 유용합니다.