[CSS] em / px / pt / % 의 차이 > JQuery & JavaScript

STUDY ROOM

JQuery & JavaScript

[CSS] em / px / pt / % 의 차이

페이지 정보

작성자 JMStudy 작성일17-05-22 17:51 조회1,078회 댓글0건

본문

<간단한 설명>

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.

- 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
- 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리

 

- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- %  : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt  : point, 일반 문서(워드 등)에서 많이 사용하는 단위

 

대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다.  

 

단위변환 사이트 : http://pxtoem.com/

 

PointsPixelsEms Percent
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%


출처: http://zinee-world.tistory.com/131 [zineeworld] 

댓글목록

등록된 댓글이 없습니다.