본문 바로가기

HTML&CSS

<sup> 태그(어깨문자)를 CSS로 구현하기

반응형

<sup> 태그는 "superscript" 의 약자로 한글로는 "어깨 문자" 라고 합니다.

"X의 제곱" 과 같은 문자를 표현할 때 사용하며

태그로는

 

<span>X<sup>2</sup></span>

 

로 표현합니다.

 

 

"<sup>" 태그를 사용하면 간편하게 어깨 문자를 표현할 수 있지만, "<sup>" 태그를 사용할 수 없거나, CSS 클래스로 구현해야 하는 상황일 경우 다음과 같이 CSS 만으로 "<sup>" 태그를 대신할 수 있습니다.

 

.sup{
  vertical-align: super;
  font-size: 0.8125em;
}

 

앞서의 제곱 표시를 새로만든 클래스로 적용하면

 

<span>X<span class="sup">2</span></span>

 

으로 되고 다음과 같이 표현됩니다.

 

 

 

 

 

반응형

닫기