2010/05/06 11:06
[웹표준 개발]
오늘은 CSS 폰트 단위에 대해서 알아보겠습니다.
pt :points(포인트) - 1포인트는 0.72인치
px :pixels(픽셀) - 화면 해상도에 대한 상대크기
% : 퍼센티지 - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기
말로하면 복잡하죠?
아래 표를보면 한눈에 쫙~들어올겁니다.
| Pixels | EMs | Percent | Points |
|---|---|---|---|
| 6px | 0.375em | 37.5% | 5pt |
| 7px | 0.438em | 43.8% | 5pt |
| 8px | 0.5em | 50% | 6pt |
| 9px | 0.563em | 56.3% | 7pt |
| 10px | 0.625em | 62.5% | 8pt |
| 11px | 0.688em | 68.8% | 8pt |
| 12px | 0.75em | 75% | 9pt |
| 13px | 0.813em | 81.3% | 10pt |
| 14px | 0.875em | 87.5% | 11pt |
| 15px | 0.938em | 93.8% | 11pt |
| 16px | 1em | 100% | 12pt |
| 17px | 1.063em | 106.3% | 13pt |
| 18px | 1.125em | 112.5% | 14pt |
| 19px | 1.188em | 118.8% | 14pt |
| 20px | 1.25em | 125% | 15pt |
| 21px | 1.313em | 131.3% | 16pt |
| 22px | 1.375em | 137.5% | 17pt |
| 23px | 1.438em | 143.8% | 17pt |
| 24px | 1.5em | 150% | 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>
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
- em 단위 계산기: http://riddle.pl/emacalc
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
| html과 xhtml의 차이점 (0) | 2010/04/19 |
| DTD선언이란? (0) | 2010/04/12 |
