Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 위첨자 텍스트 만들기: sup 태그 사용법과 예제

HTML <sup> 태그란?

HTML에서 위첨자(superscript) 텍스트를 만들려면 <sup> 태그를 사용합니다. 이 태그로 감싼 텍스트는 일반 텍스트보다 작은 글꼴 크기로 표시되며, 기준선보다 위쪽에 위치하게 됩니다.

가장 대표적인 활용 예는 수학식의 거듭제곱 표현입니다.

2<sup>3</sup> + 3<sup>2</sup> = 17

위 코드는 브라우저에서 2³ + 3² = 17과 같이 출력됩니다.

예제

아래 전체 코드를 실행하면 HTML 문서에서 위첨자가 실제로 어떻게 표시되는지 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML sup 태그</title>
    </head>
    <body>
        2의 3제곱 더하기 3의 2제곱: 2<sup>3</sup> + 3<sup>2</sup> = 17
    </body>
</html>

<sup> 태그의 주요 활용 사례

  • 거듭제곱 표현: x², 10⁶처럼 수학 공식의 지수를 나타낼 때
  • 영어 서수 표기: 1st, 2nd, 3rd 형태의 서수
  • 각주 및 참조 번호: 본문 단어 뒤에 붙이는 주석 번호 표시
  • 학술·과학 표기: 동위원소 기호 등 특수 표기에 활용

참고: 아래첨자가 필요하다면 sub 태그 사용

반대로 기준선 아래에 내려오는 아래첨자(subscript) 텍스트가 필요하다면 <sub> 태그를 사용하세요. 예를 들어 화학식 물(H₂O)은 H<sub>2</sub>O처럼 작성하면 됩니다. 두 태그를 함께 익혀두면 수식, 화학식, 각주 등 다양한 콘텐츠를 깔끔하게 표현할 수 있습니다.