HTML에서 위 첨자 쓰는 법
올릴 텍스트를 <sup>로 감싸세요. 브라우저가 줄 위로 작게 올려서 보여 줘요. 짝인 <sub>는 텍스트를 작게 내려서 보여 줘요.
<sup>와 <sub>는 인라인이고 다른 인라인 요소를 담을 수 있어서, 2<sup>n+1</sup>이나 x<sub><i>i</i></sub>도 돼요.
주요 용도
| 원하는 것 | 쓰는 법 | 결과 |
|---|---|---|
| 지수 | 10<sup>3</sup> | 10의 3제곱 |
| 서수 | 2<sup>nd</sup> | 글자가 올라간 2nd |
| 각주 번호 | text<sup><a href="#n1">1</a></sup> | 올라간, 클릭할 수 있는 1 |
| 화학식 | C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> | 포도당 |
| 인덱스나 밑 | x<sub>1</sub>, log<sub>2</sub> | 내려간 1과 2 |
| 상표 | Brand<sup>TM</sup> 또는 Brand™ | 올라간 TM |
위치가 의미의 일부일 때 태그를 쓰세요. m<sup>2</sup>와 m2는 다른 거예요. 라벨이나 배지처럼 작게 보이기만 하면 되는 텍스트에는 대신 CSS를 쓰세요.
sup로 각주 만들기
각주 번호는 아래쪽 메모로 연결되는 위 첨자 링크예요. 각 메모에 id를 주고 링크가 그곳을 가리키게 하세요.
번호를 클릭하면 메모로 이동하고, "Back"을 누르면 돌아와요. 작은 링크에서 밑줄을 없애면 문단이 깔끔해지고, 링크 색 덕분에 여전히 클릭할 수 있다는 게 보여요.
줄 간격 고르게 유지하기
기본적으로 <sup>나 <sub>는 그 줄을 주변 줄보다 높게 만들 수 있어서, 지수가 몇 개 있는 문단은 줄 간격이 고르지 않아 보여요. 여기에 line-height: 0을 주면 고쳐져요.
회색 상자는 두 번째와 네 번째 줄이 벌어져서 더 높아요. 초록색 상자는 모든 줄 높이가 같아요. 기본 스타일시트에 이 규칙을 한 번 넣어 두면 더 신경 쓸 필요가 없어요.
유니코드 문자와 MathML
흔한 경우 몇 가지에는 이미 만들어진 문자가 있어요. ²(²), ³(³), ¹(¹), ™(™), ½(½)예요. 태그가 필요 없고 줄 높이에도 영향을 주지 않지만, 일부 숫자와 글자에만 있어요.
제대로 된 수식(분수, 제곱근, 지수의 지수)에는 MathML을 쓰세요. 현재 브라우저는 MathML을 기본으로 렌더링해요.
<msup>는 밑과 지수를 받고, <msub>는 아래 첨자에 같은 일을 해요. 문장 안의 지수 하나에는 <sup>가 더 간단해요.
자주 하는 실수
- 글자를 작게 하려고
<sup>를 씀. 텍스트를 올리기까지 하고, 독자에게 위 첨자라고 알려요. 작은 글자에는font-size를 쓰세요. - 줄 간격이 고르지 않음.
sup, sub { line-height: 0; }를 추가하세요. - 완성된 텍스트에
x^2나H2O로 씀. 내용이 올바르게 읽히도록x<sup>2</sup>와H<sub>2</sub>O를 쓰세요. - 각주 번호가 너무 작아서 누르기 어려움. 휴대폰에서 올라간 숫자 하나는 아주 작은 터치 영역이에요.
sup a에 padding을 조금 주거나 메모를 텍스트 가까이에 두세요.
자주 묻는 질문
HTML에서 위 첨자는 어떻게 쓰나요?
올릴 텍스트를 <sup>로 감싸세요. x<sup>2</sup>는 x의 제곱을, 1<sup>st</sup>는 서수를 보여 줘요. 브라우저가 기준선 위로 작게 올려서 그려요.
HTML에서 아래 첨자는 어떻게 쓰나요?
<sub>를 쓰세요. 물은 H<sub>2</sub>O, 인덱스는 x<sub>1</sub>처럼 써요. 기준선 아래로 작게 내려서 그려져요.
HTML에서 x 제곱은 어떻게 쓰나요?
x<sup>2</sup>를 쓰거나 이미 만들어진 문자 x²를 쓰세요. 이 문자는 엔티티 ²로도 입력할 수 있어요. 제곱과 세제곱에는 문자로도 충분하고, 2<sup>n+1</sup>처럼 어떤 지수든 <sup>로 쓸 수 있어요.
<sup>를 쓰면 왜 줄 간격이 고르지 않게 되나요?
올라간 텍스트 때문에 그 줄이 문단의 다른 줄보다 높아질 수 있어요. sup, sub { line-height: 0; }로 고치세요. 줄 높이를 늘리지 않게 돼요.
<sup> 대신 CSS를 써도 되나요?
vertical-align: super와 더 작은 font-size를 쓰면 똑같아 보이지만, <sup>와 <sub>는 의미를 담아요. "m2"와 "m<sup>2</sup>"는 서로 다른 값이에요. 올리거나 내린 위치가 내용의 일부라면 태그를 쓰세요.
