sup element - by. UXKM

요약 설명

<sup> 요소는 텍스트를 윗첨자(superscript)로 표시하는 시맨틱 태그로, 수학 지수, 단위, 각주 번호 등에서 기준선보다 위에 위치한 작은 문자를 나타낼 때 사용됩니다.
예를 들어 제곱을 나타내는 2²에서 숫자 2 위의 제곱 기호에 사용되며, 시각적 표현뿐만 아니라 의미적으로도 윗첨자의 역할을 명확히 전달할 수 있도록 돕습니다. <sub>(아래 첨자)와 함께 과학, 수학, 참고 문헌 등의 콘텐츠에 자주 활용됩니다.

주요 역할 및 특징

  1. 위 첨자 표시
    • <sup>는 텍스트를 기준선 위에 작게 표시합니다.
    • 수학식(x²), 과학 기호(E=mc²), 각주(note¹) 등에 자주 사용됩니다.
  2. 의미론적 역할
    • 단순히 텍스트를 스타일링하는 것이 아니라, 텍스트가 위 첨자임을 의미적으로 나타냅니다.
    • 문서의 구조와 의미를 명확히 전달할 때 유용합니다.
  3. CSS로 스타일 변경 가능

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

CSS 기본 값

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

기본 문법

속성

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

예제

상황별 예제

CSS로 스타일 변경

접근성을 고려한 위 첨자

주의사항

  • <sup>는 위 첨자로 표현해야 하는 텍스트에만 사용해야 하며, 단순 스타일링 목적으로 사용해서는 안 됩니다.
  • <sup>는 스크린 리더에서 특별히 처리되지 않을 수 있으므로, 의미를 보완하려면 aria-label 또는 aria-describedby를 사용하는 것이 좋습니다.
  • 문서에서 너무 많은 텍스트를 위 첨자로 처리하면 가독성이 떨어질 수 있으므로, 적절히 사용하세요.