HTML의 <sup> 태그는 위첨자(superscript) 텍스트를 지정합니다. 위첨자는 한 줄의 텍스트에서 기준선보다 위쪽에 작게 표시되는 문자입니다. 반대로 <sub> 태그는 아래첨자(subscript) 텍스트를 나타내며, 기준선 아래쪽에 표시되는 문자를 의미합니다.
일반적으로 우리가 접하는 대부분의 텍스트는 고유한 베이스라인(baseline)과 x-높이(x-height)를 가지고 있습니다.
이 글에서 지금까지 등장한 모든 텍스트에도 베이스라인이 존재합니다. 베이스라인은 밑줄을 그었을 때 그 밑줄이 위치하게 되는 지점이라고 생각하면 이해하기 쉽습니다. x-높이는 소문자가 끝나는 가상의 선으로, 그 공간을 꽉 채우는 소문자 'x'에서 이름이 유래했습니다.
이 가이드에서는 HTML에서 아래첨자와 위첨자를 정의하는 방법을 알아보겠습니다. 각각의 예제를 통해 실제 코드에서 어떻게 활용할 수 있는지 단계별로 살펴보겠습니다.
위첨자와 아래첨자는 언제 사용할까?
때때로 본문 텍스트보다 반 글자만큼 위 또는 아래에 배치된 문자가 필요한 경우가 있습니다. 아래첨자는 본문보다 반 글자 아래에 놓인 문자이고, 위첨자는 반 글자 위에 놓인 문자입니다.
실무에서는 수학 공식, 화학 반응식, 인용 표기나 각주(footnote) 등을 작성할 때 이러한 문자들을 자주 사용합니다.
HTML 위첨자(Superscript) 만들기
HTML에서 위첨자를 만들려면 <sup> 태그를 사용합니다. 이 태그로 감싼 텍스트는 줄의 위쪽으로 올라가며 작게 표시됩니다. <sup> 태그에는 태그 전용 속성이 없습니다.
다음은 기본 문법입니다:
<p>4 <sup>2</sup> = 16</p>
숫자 "2"를 <sup> 태그로 감싸면 해당 숫자가 위첨자로 표시됩니다. 위 코드는 브라우저에서 다음과 같이 출력됩니다:
4 ² = 16
HTML 아래첨자(Subscript) 만들기
HTML의 <sub> 태그는 아래첨자 텍스트를 정의합니다. 아래첨자란 줄의 아래쪽 방향으로 내려가 표시되는 텍스트를 말합니다.
다음 문법을 살펴보겠습니다:
<p>This is main text. <sub>3</sub></p>
위 코드의 실행 결과는 다음과 같습니다:
This is main text. ₃
위첨자 예제와 마찬가지로 <sub> 태그에도 별도의 속성을 지정하지 않았습니다. 텍스트를 아래첨자로 만들려면 해당 텍스트를 <sub> 태그로 감싸기만 하면 됩니다.
아래첨자는 주기율표에서 원소의 원자 번호나 화학식(예: H₂O)을 표기할 때 자주 사용됩니다.
HTML 위첨자·아래첨자 종합 예제
이번에는 <sub>와 <sup> 태그를 실제 HTML 웹 페이지에서 함께 사용하는 예제를 살펴보겠습니다. 다음 코드를 확인해 보세요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superscript and Subscript</title>
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<div style="text-align:center;" class="container">
<div>
<h3>Superscript</h3>
<span>E=MC<sup>2</sup></span>
<br />
<span>1.7 x 10<sup>4</sup></span>
</div>
<div>
<h3>Subscript</h3>
<span>H<sub>2</sub>O</span>
<br />
<span><sup>†1</sup>Ipsum, Lorem. Footnote example, 2020.</span>
</div>
</div>
</body>
</html>위 코드에서 보듯이, <span> 요소 안에서 <sub> 태그와 <sup> 태그를 사용해 아래첨자와 위첨자 효과를 구현했습니다. 두 태그에는 다음과 같은 기본 스타일 값이 적용됩니다:
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
</style>두 태그 모두 HTML에서 제공하는 전역 속성(global attributes)과 이벤트 속성(event attributes)을 사용할 수 있습니다. 즉, 사용자가 텍스트를 클릭했을 때 실행될 이벤트 핸들러를 설정할 수도 있습니다.
또한 일반적인 HTML 속성을 활용해 요소를 자유롭게 커스터마이징할 수 있습니다. 사용 가능한 전역 속성의 전체 목록은 W3Schools의 Global Attributes 문서에서 확인할 수 있습니다.
마무리
HTML의 <sub> 요소는 문단에 아래첨자를 추가하며, 아래첨자는 텍스트 줄의 아래쪽에 표시됩니다. <sup> 요소는 위첨자를 추가하며, 위첨자는 텍스트 줄의 위쪽에 표시됩니다.
이것으로 HTML에서 위첨자와 아래첨자를 만드는 방법을 모두 익혔습니다!
HTML을 더 깊이 학습하고 싶다면, 검증된 온라인 강좌와 도서 정보를 담은 HTML 학습 가이드를 참고해 보세요.