sub element - by. UXKM

요약 설명

<sub> 요소는 텍스트를 아래 첨자(subscript)로 표시하는 시맨틱 태그로, 화학식, 수식, 각주 등에서 기준선보다 아래에 위치한 작은 문자를 나타낼 때 사용됩니다.
예를 들어 화학식 H₂O에서 숫자 2를 표현할 때 적합하며, 시각적 효과 외에도 의미적으로 아래 첨자의 용도를 명확히 하기 위한 마크업입니다. 보통 <sup>(윗첨자)와 함께 사용되어 수식이나 과학적 기호 등을 구조적으로 표현할 수 있습니다.

주요 역할 및 특징

  1. 아래 첨자 표시
    • <sub>는 텍스트를 기준선 아래에 작게 표시합니다.
    • 주로 화학식(H₂O), 수학 기호(x₂), 주석(note₁) 등에 사용됩니다.
  2. 의미론적 역할
    • <sub>는 단순한 시각적 스타일링이 아니라, 텍스트가 아래 첨자임을 의미론적으로 나타냅니다.
    • 텍스트의 구조와 의미를 명확히 하기 위해 사용됩니다.
  3. CSS로 스타일 변경 가능

    기본 스타일 외에도 CSS를 사용해 텍스트 크기와 위치를 자유롭게 조정할 수 있습니다.

CSS 기본 값

<sub> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<sub> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

상황별 예제

CSS로 스타일 변경

접근성을 고려한 아래 첨자

주의사항

  • <sub>는 반드시 아래 첨자로 표현해야 하는 텍스트에만 사용해야 하며, 단순히 스타일링 목적으로 사용해서는 안 됩니다.
  • 스크린 리더가 <sub> 텍스트를 제대로 전달하지 못할 수 있으므로, 필요 시 aria-label 또는 aria-describedby를 사용해 의미를 보완하세요.
  • 화학식, 수학식, 주석 번호 등 적절한 문맥에서만 사용하고, 과도한 사용은 피하세요.