sitelink1 | http://chatii.tistory.com/?page=64 |
---|---|
sitelink2 | http://hooney.net/2005/04/17/51/ |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
W3C의 CSS 2.1 표준권고안
(번역
)에 따르면 크기단위는 절대단위와 상대단위로 구분됩니다. 상대단위로는 em, ex, px가 있는데 이는 기종 간, 플랫폼 간의 호환성을 유지하는 데 유리합니다. 절대단위로는 in, cm, mm, pt, pc가 있으며 출력장치의 물리적 속성을 아는 경우에만 효율적입니다.
em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 한다
ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 한다
px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 갖는다in : inch
cm : centimeter
mm : millimeter
pt : point, 1/72inch와 같다
pc : pica, 12point와 같다절대단위와 상대단위 구분의 필요성이 점차 사라지고는 있지만, 아직도 단위 간 환산문제로 골치 아픈 경우가 많은데 이를 쉽게 도와주는 웹사이트
가 있어서 표와 함께 소개합니다. 일반적으로 대부분의 브라우저는 폰트 사이즈의 기본값으로 16px / 1em / 12pt를 가집니다.
웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다.REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
12 | Style cssText Property | 황제낙엽 | 2012.09.13 | 320 |
11 | 브라우저별 border 설정에 따른 디자인 테스트 고려사항 | 황제낙엽 | 2012.08.28 | 96 |
10 | CSS 문법 분석 | 황제낙엽 | 2012.08.28 | 104 |
9 | Element 의 투명도 | 황제낙엽 | 2012.05.25 | 179 |
8 | IE Conditional Comments 필터링 | 황제낙엽 | 2011.10.05 | 143 |
7 | How To Create an IE-Only Stylesheet | 황제낙엽 | 2011.10.05 | 147 |
6 |
Document documentMode Property
![]() | 황제낙엽 | 2011.10.04 | 981 |
5 |
(CSS2) RGBA값 사용해보기 및 IE 패치 방법
![]() | 황제낙엽 | 2011.10.04 | 202 |
4 | Style overflow Property | 황제낙엽 | 2011.06.27 | 205 |
» |
pt, px, em, % 비교표
![]() | 황제낙엽 | 2011.05.24 | 788 |
2 | 박스(box) 모델 | 황제낙엽 | 2009.06.27 | 271 |
1 | Element 의 visibility스타일과 display스타일 | 황제낙엽 | 2008.09.24 | 93 |