웹 개발을 위한 HTML 가이드 22편 - small 태그

텍스트 관련 태그

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

제목

이번 글은 웹 개발을 위한 HTML 가이드 22편입니다. 이번 글에서 다룰 내용은 저번 글에서 예고했던대로 small태그입니다. 텍스트 관련 태그도 어느정도 진행이 된 것 같습니다. 이제 정말 얼마 안남았거든요. 사실 이번 글에서 다룰 내용도 그다지 중요한 내용은 아닙니다. 그래도 일단은 다루고 넘어가려고 합니다. 그럼 바로 본론으로 들어가봅시다.

small 태그

small태그는 작은 텍스트를 표현할 때에 사용합니다. 기존의 텍스트보다 약간 작아지는 효과를 가지고 있습니다. 특별한 의미나 기능을 가지는 태그는 아니기 때문에 몰라도 좋았으나 지금은 특별한 의미가 생겼습니다.

<p>small 태그는 이렇게 <small>작은 텍스트를 표현할 때에 사용합니다.</small></p>

vscode를 열고 대충 따라서 입력을 해보고 라이브 서버를 열어보세요. 그럼 아래와 같은 결과물이 나타나게 됩니다.

크게 보기 (새 창)

정말 텍스트가 작아졌습니다. HTML 5가 나타나면서 small태그에 변화가 생겼습니다. 현재는 페이지의 본문에 비해 비교적 중요도가 떨어지는 작은 영역에 쓰는 것을 권장하고 있습니다. 이를테면 저작권을 표기하는 부분을 예로 들 수 있겠습니다.

크게 보기 (새 창)

small태그를 사용하지 않고도 똑같은 효과를 만드는 방법이 있는데, 바로 CSS를 활용하는 것입니다. 우리는 아직 CSS를 배우지 않았기 때문에 아래의 코드를 봐도 아 이런 게 있구나라는 시선으로 바라보면 되겠습니다.

보면 알겠지만 small태그에는 font-size: smaller;라는 CSS가 적용되어 있습니다. small태그의 기본 스타일 입니다. 그렇기 때문에 위의 코드와 아래의 코드는 동일한 셈입니다. 이렇게 CSS를 활용해도 되고 small태그를 활용해도 됩니다. 물론 외관상으로는 동일하지만 그 의미는 전혀 다르다는 점을 인지하고 있어야합니다.

<p>small 태그는 이렇게 <span>작은 텍스트를 표현할 때에 사용합니다.</span></p>

span {
  font-size: smaller;
}

이번 글에서는 간단하게 small태그에 대해서 알아봤습니다. 저작권이나 연락처 같은 비교적 중요도가 떨어지는 부분에 사용하는 태그였습니다. 이번 글에서 준비한 내용은 여기까지입니다. 다음 글에서는 코드 블럭을 다루는 code태그와 pre태그에 대해서 알아보도록 하겠습니다. 이번 글은 여기서 마치도록 하고 다음 글에서 봅시다.