CSS 단위 em, pt, px


24px-Disambig_grey.svg.png 다른 뜻에 대해서는 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>

같이 보기

참고