CSS 단위별 폰트사이즈(px,pt,em,%)
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 3,320회
작성일 15-04-27 13:50
본문
일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다.
하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때
동작하게 하기 위함입니다.
최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다.
em으로 취할 수 있는 이득이 거의 없기 때문이지요.
하지만 Responsive Web Design을 추구하는 작업을 하시거나,
화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는
em을 활용하여 scaleable한 UI를 구성할 수도 있습니다.
또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다.
pt : points(포인트) - 1포인트는 0.72인치
px : pixels(픽셀) - 화면 해상도에 대한 상대크기
%, em - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기
[출처] 블루웨이브 Biew
|
pixels |
ems |
perecent |
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 |
[출처] 블루웨이브 Biew
댓글목록
등록된 댓글이 없습니다.