HTML 태그 윗첨자, 아래첨자 넣는 방법

블로그를 운영하면서 HTML/CSS에 대해 기본적인 지식이 필요하다는 것을 많이 느꼈습니다. 기본 에디터에서 제가 원하는 것을 구현할 수 없을 때가 많더라고요. 그래서 기본적으로 알고 있으면 유용한 태그들에 대해 알아보려고 합니다. 첫번째 시간 윗첨자, 아래첨자입니다. 

 

아랫첨자는 화학식에 많이 사용하고, 윗첨자는 단위에 많이 사용하합니다. 아래첨자는 subscript 태그를 사용합니다. subscript는 아래에 적은 문자라는 뜻입니다. 윗첨자는 super subscript 태그로 위에 적은 문자라는 뜻입니다. 

사용방법

1. 아래첨자 

원하는 부분에 태그를 넣어주면 됩니다. 예를 들어 우리가 주로 사용하는 연료인 메탄, 프로판, 부탄이 화학식을 표현해 보겠습니다. 

메탄 : CH₄

프로판 : C₃H₈

부탄 : C₄H₁₀

위 탄소화합물은 파라핀 계열로 화학식이 C_nH_2n+2입니다.

위의 글을 표현하려면 아래처럼 태그를 사용하면 됩니다. 참고로 <P>는 줄바꿈을 해주는 태그입니다. 

<p>메탄 : CH<sub>4</sub></p>
<p>프로판 : C<sub>3</sub>H<sub>8</sub></p>
<p>부탄 : C<sub>4</sub>H<sub>10</sub></p>
<p>위 탄소화합물은 파라핀 계열로 화학식이 C<sub>n</sub>H<sub>2n+2</sub>입니다.</p>

2. 윗첨자

윗첨자도 원하는 구문에 사이에 태그를 사용하면 됩니다. 주로 단위나 수식의 승수를 표시할 때 사용합니다. 

m², km²은 넓이, m/s²은 가속도 단위입니다.

위의 예시는 아래처럼 숫자부분에 <sup>태그를 넣어주시면 됩니다. 

m<sup>2</sup>, km<sup>2</sup>은 넓이, m/s<sup>2</sup>은 가속도 단위입니다.

자주 사용하는 단위는 문자표에 있습니다. 하지만 폰트도 다르고 첨자도 작아서 가독성이 떨어지더라고요. <sup> 태그를 사용할 때가 더 깔끔해 보일 때도 있습니다. 

문자표 단위 기호 : ㎡, ㎢, ㎨

<sup> 태그 사용시 : m², km², m/s²

마치며

위첨자, 아래첨자 태그는 알고나니 꽤 유용했습니다. 특히나 공학이나 과학에 관련된 블로그라면 꼭 필요한 태그입니다.