Tech Stock logo Tech Stock

CSS에서 어쩔때는 px? 어쩔때는 em? 어쩔때는 퍼센트?

로 표기하길래 찾아보니 나름 의미가 있었다.

px와 em은 절대 단위이고, 퍼센트는 상대단위 라는 정도로만 알아두면 될듯.

PX는 엔드유저가 폰트크기를 조절불가, EM이나 REM은 엔드유저가 폰트크기를 조정 가능

나머지는 가끔 표를 참고로 해서 수정이나 작성을 하자

px(Pixels) em(Ems) %(Percent) pt(Point) Keyword
8px 0.5em 50% 6pt  
9px 0.55em 55% 7pt  
10px 0.625em 62.5% 7.5pt x-small
11px 0.7em 70% 8pt  
12px 0.75em 75% 9pt  
13px 0.8em 80% 10pt small
14px 0.875em 87.5% 10.5pt  
15px 0.95em 95% 11pt  
16px 1em 100% 12pt medium
17px 1.05em 105% 13pt  
18px 1.125em 112.5% 13.5pt large
19px 1.2em 120% 14pt  
20px 1.25em 125% 14.5pt  
21px 1.3em 130% 15pt  
22px 1.4em 140% 16pt  
23px 1.45em 145% 17pt  
24px 1.5em 150% 18pt x-large
25px 1.6em 160% 20pt  
26px 1.8em 180% 22pt  
27px 2em 200% 24pt xx-large
28px 2.2em 220% 26pt  
29px 2.25em 225% 27pt  
30px 2.3em 230% 28pt  
31px 2.35em 235% 29pt  
32px 2.45em 245% 30pt  
33px 2.55em 255% 32pt  
34px 2.75em 275% 34pt  
36px 3em 300% 36pt