HTML sup 태그 활용법 : 윗첨자로 필수항목 표시하기

HTML에서 <sup> 태그는 **위 첨자(Superscript)**를 표시할 때 사용한다.
글자의 높이를 기본 라인보다 위로 올리고, 크기를 작게 만들어 시각적으로 구분해 주는 역할을 한다.
단순히 디자인적으로 글자를 작게 올리는 것이 아니라, 문맥적으로 의미가 있는 경우에 주로 사용한다.

1. 지수 표현 ( 2², 10⁴)
2. 서수 표현 (1st, 2nd)
3. 주석 및 인용 번호 (문장 끝¹)
4. 화학적 이온 표기 (H+, O²- )

이 중 3번째에 해당하는 것으로 게시판 글쓰기에서 항목 별 필수항목 일 경우 사용한다.
글자가 아닌 "*" 로 표시되는 디자인이 많은데 sup 태그를 사용하면스크린 리더를 통해 해당 내용을 식별 할 수 있다.
이때, 실제 글자 내용은 css를 통해 가리고 * 가 대체하여 표현되게 한다.

<p>This text contains <sup>superscript text</sup></p>

<label>
    레이블 <sup>필수항목</sup>
</label>

 

sup {
  position: relative;
  margin-left: 5px;
  font-size: 0;
  overflow: hidden;
  vertical-align: top;
}
sup::before {
  content: '*';
  position: absolute;
  top: 0;
  right: 0;
  font-size: $font-size-sm;
  color: var(--hw-p01-root);
}

참조 : https://www.w3schools.com/tags/tag_sup.asp