CSS로 '위 첨자'와 '아래 첨자' 입력

W3C Cascading Style Sheets

 

위 첨자: superscript

아래 첨자: subscript

HTML 코드

 

한글^{위 첨자}

한글^{위 첨자}

 

한글_{아래 첨자}

한글_{아래 첨자}

 

CSS 코드

 

기본(디폴트)
vertical-align: baseline;

위 첨자(superscript)
vertical-align: super;

아래 첨자(subscript)
vertical-align: sub;

 

font-size를 'small'이나 'smaller' 값으로 지정하여 글자의 크기를 더 작게 만듭니다. px나 em 단위로 지정해도 되겠죠.

 

Class 지정 방법 선택

 

.superscript {
	vertical-align: super;
	font-size: small;
}
.subscript {
	vertical-align: sub;
	font-size: small;
}
.sup {
	vertical-align: 0.5em;
	font-size: 0.75em;
}
.sub {
	vertical-align: -0.5em;
	font-size: 0.75em;
}

 

<sub>, <sup> 태그 디자인 선택

 

sup {
	vertical-align: super;
	font-size: small;
}
sub {
	vertical-align: sub;
	font-size: small;
}

sup {
	vertical-align: 0.5em;
	font-size: 0.75em;
}
sub {
	vertical-align: -0.5em;
	font-size: 0.75em;
}

 

위 첨자/아래 첨자로 지정하고 싶은 블록의 HTML 컨테이너에 위에서 만든 클래스를 추가합니다.

 

<div class="superscript">...</div>

<span class="subscript">...</span>