웹 개발을 위한 HTML 가이드 17편 - 윗첨자와 아랫첨자 태그

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)
• 윗첨자와 아랫첨자 태그(sup, sub)현재 글
• 텍스트의 추가, 제외 태그(ins, del)
• 취소선(s)과 밑줄 표현
• 인용 태그(q, blockquote)
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

웹을 돌아다니다 보면 일반 텍스트보다는 작은 텍스트인데 아래로 내려가 있거나 위로 올라가 있는 텍스트들이 보일 때가 있습니다. 이걸 아랫첨자와 윗첨자라고 합니다. 문서를 만드는 다양한 에디터에는 이런 기능들이 포함되어 있습니다. HTML에서도 가능합니다. 이번 글은 웹 개발을 위한 HTML 가이드 17편입니다. 이번 글에서 다룰 내용은 윗첨자와 아랫첨자입니다.

이번 글의 내용은 아주 중요한 것은 아닙니다. 이런 태그도 있구나 하면서 나중에 생각이 나거나 사용하고 싶을 때에 사용할 수 있으면 이번 글의 학습은 아주 성공적인 것이 됩니다. 그러니까 외울 필요는 없고 이해하고 넘어가는 게 중요합니다.

윗첨자와 아랫첨자

말로는 설명을 했지만 윗첨자나 아랫첨자에 대해서 전혀 모르는 분도 있습니다. 그런 분들을 위해 이미지를 준비했습니다.

크게 보기 (새 창)

이렇게 텍스트의 특정 부분이 위에 있거나 아래에 있으면 윗첨자, 아랫첨자라고 합니다. 윗첨자와 아랫첨자를 만드는 방법을 배워봅니다. 윗첨자와 아랫첨자는 타이포그래픽한 것을 연출할 때에 사용이 됩니다. 과학에서 사용되는 분자식에서 아랫첨자를 사용하는 게 그런 예시라고 보시면 됩니다. 그럼 윗첨자부터 살펴보도록 합시다.

윗첨자 태그(sup)

윗첨자를 나타내는 태그인 sup태그는 Superscript의 약자입니다. 윗첨자는 보통 나무위키 같은 곳에서 볼 수 있습니다. 이 블로그에서도 각주를 표현할 때에 윗첨자를 이용해서 달아두고 있습니다. 여는 태그와 닫는 태그가 존재하고 아래처럼 사용하면 됩니다.

<p>아이유는 2021년 올해 29세가 되었다.<sup><a href="#">[1]</a></sup></p>

크게 보기 (새 창)

위의 코드를 실행한 결과가 위의 이미지입니다. 이미지를 보면 [1] 이라는 링크에 해당하는 부분은 윗첨자로 처리를 했는데 잘 표현이 된 것을 볼 수 있습니다. 어려울 것이 없죠?

아랫첨자 태그(sub)

이번에는 아랫첨자에 대해서 알아봅시다. 아랫첨자를 나타내는 태그인 sub태그는 Subscript의 약자입니다. 아랫첨자는 분자식에서 엿볼 수 있습니다. 마찬가지로 여는 태그와 닫는 태그가 있고 그 사이에 내용물을 넣으면 됩니다. 연습하는 느낌으로 분자식을 한 번 만들어봅시다.

<p>물의 분자식은 <strong>H<sub>2</sub>O</strong>입니다.</p>

크게 보기 (새 창)

이런식으로 사용하면 되는 태그입니다. HTML은 처음 보기에는 복잡해보일지라도 정작 규칙이 일관적이고 직관적이기 때문에 이해하는 것은 어렵지 않습니다.

이번 글의 내용은 여기까지입니다. 이번 글에서는 윗첨자와 아랫첨자에 대해서 알아봤습니다. 사실 쓸 곳이 그렇게 많지는 않은데 저는 가끔씩 사용합니다. 각주를 달아야 할 때 말이죠. 여러분들도 한쯤은 연습을 해보고 다음 파트로 넘어가는 게 좋을 것 같습니다. 우리 프로젝트에는 적용할 일이 없으니까 실전 연습 파트는 넘어가도록 하겠습니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서는 텍스트의 추가, 제외 태그에 대해서 알아보도록 합시다. 그럼 다음 글에서 봅시다.