CSS font size

절대적인 Absolute

px

상대적인 Relative

em, rem, vw, vh, % 등

em vs rem

relative to parent element vs relative to root element

em

폰트에 상관없이 항상 같은 폰트 사이즈를 갖는다. 그 폰트 사이즈는 부모의 폰트 사이즈를 곱한 값이 된다. (1em = 16px) html이나 body에 사이즈 지정하지 않는 이상 기본 사이즈는 16px이다. 부모의 사이즈로부터 영향을 받는 %와 동일하다. (em 대신 % 사용 가능함)

ex) parent font size = 20px 이고,
child font size = 1em 이면, child size는 1em = 20px이 된다.

parent font size = 40px 이고,
child font size = 8em 이면, child size는 8 * 40 px이 된다.

rem : root em

부모가 아닌 root에 영향을 받는다.
html의 font size 인 16px의 영향을 받아서
parent font size = 8rem 이면, 16 8 px 이 되고,
child font size = 0.5rem 이면, 16 0.5 px 이 된다.

viewport (vw, vh, vmin, vmax)

vw : 100vw 는 viewport의 100 width
50vw 는 viewport의 50 width = 브라우저의 절반 크기를 쓰겠다!
vh : viewport 의 height

viewport에 관한 것은 부모 요소에 관계없이 브라우저의 크기에 따른다.

그러면, 어떨 때 무엇을 쓰는게 좋을까?

Parent 크기에 영향 => %, em

Browser 에 영향 => v*, rem

px -> em 계산할때
유용한 사이트 : PXtoEM.com

Reference