메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

css basic CSS 폰트 단위

흑묘 2013.09.02 11:23 read.130

2010/05/06 11:06
[웹표준 개발]
오늘은 CSS 폰트 단위에 대해서 알아보겠습니다.

pt :points(포인트) - 1포인트는 0.72인치
px :pixels(픽셀) - 화면 해상도에 대한 상대크기
% : 퍼센티지 - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기

말로하면 복잡하죠?

아래 표를보면 한눈에 쫙~들어올겁니다.

PixelsEMsPercentPoints
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt



1em은 16px 이고, 우리가 많이 쓰는 12px은 0.75em 이되죠.

부모 요소에 적용한 스타일이 자식 요소에 계속되는 것을 상속(inherit)라고 합니다. 상속된 값이 "%"나 "em" 등의 상대단위인 때는 일반적으로 부모 요소의 값에 자식 요소의 값을 더한 값이 적용됩니다.

<style type="text/css">
body { font-size:62.5%; color:green;}
div { font-size:2em; }
p { font-size:1.5em; border : 1px solid red ; padding: 1em;}
</style>
< body>
<p>body의 62.5%의 폰트사이에서 p의 1.5em만큼 커진 폰트 사이즈입니다. </p>
<div>
<p>div의 2em사이즈를 한번 더 상속받은 이곳은 폰트가 위의 p태그보다 큽니다.</p>
</div>
</body>



em사이즈를 사용할땐 상속받는 값을 생각하며 계산을 해야해서 쬐끔 복잡하다는 느낌이 들기도 합니다.

다음은 폰트 크기 계산을 도와주는 웹 사이트에요.
- px 단위를 em 단위로 변환: http://pxtoem.com
- em 단위 계산기: http://riddle.pl/emacalc
추가메뉴 목록
위로