CSS 단위 em, pt, px

다른 뜻에 대해서는 HTML em 태그 문서를 참조하십시오.

개요

CSS 단위 em, pt, px

• 일반적으로 1em = 12pt = 16px
• 단 pt와 px는 절대적인 단위이지만, em은 상대적인 단위임

예시 1

<p>안녕하세요</p>
<p style='font-size:1em;'>안녕하세요</p>
<p style='font-size:12pt;'>안녕하세요</p>
<p style='font-size:16px;'>안녕하세요</p>
<p style='font-size:100%'>안녕하세요</p>
<hr>
<p style='font-size:.75em;'>안녕하세요</p>
<p style='font-size:9pt;'>안녕하세요</p>
<p style='font-size:12px;'>안녕하세요</p>
<p style='font-size:75%'>안녕하세요</p>

예시 2

<div style='font-size:10px'>
	<div style='font-size:9pt;'>안녕하세요 (9pt)</div>
	<div style='font-size:12px;'>안녕하세요 (12px)</div>
	<div style='font-size:.75em;'>안녕하세요 (.75em)</div>
	<div style='font-size:75%'>안녕하세요 (75%)</div>
</div>
<hr>
<div style='font-size:20px'>
	<div style='font-size:9pt;'>안녕하세요 (9pt)</div>
	<div style='font-size:12px;'>안녕하세요 (12px)</div>
	<div style='font-size:.75em;'>안녕하세요 (.75em)</div>
	<div style='font-size:75%'>안녕하세요 (75%)</div>
</div>
<hr>
<div style='font-size:40px'>
	<div style='font-size:9pt;'>안녕하세요 (9pt)</div>
	<div style='font-size:12px;'>안녕하세요 (12px)</div>
	<div style='font-size:.75em;'>안녕하세요 (.75em)</div>
	<div style='font-size:75%'>안녕하세요 (75%)</div>
</div>

같이 보기

• 픽셀
• CSS 측정 단위

참고

• http://www.w3schools.com/cssref/css_units.asp
• http://www.w3.org/Style/Examples/007/units.en.html