[CSS] EM과 REM / Responsive CSS Units

Jungyub Song·2020년 8월 29일
0

1. Absolute length units

대표적으로 사용하는 px은 모니터에서 보여질 수 있는 가장 작은 단위이다.

2. Relative length units

(1) em

typography에서 현재 지정된 포인트 사이즈(폰트)를 나타낸 단위이다.
ex) 16px = 1em
부모의 font-size가 자식의 font-size에 영향을 미친다.

(2) rem

em과 비슷하지만, 자식의 font-size가 부모에 따라 정해지는 것이 아닌, root 요소(별도로 지정하지 않으면 100%로 지정되어 있음)에 영향을 받아 계산하게 된다.
이러한 경우, 브라우저 환경에서 font-size 변경할 경우, 반응형으로 변경됨을 확인할 수 있다.

(3) vw / vh

100vw = 브라우저의 너비의 100%를 사용하겠다.
100vh = 높이의 100%를 사용하겠다.
이렇게 설정할 시, 브라우저의 너비에 따라 반응형으로 크기가 변경된다.

0개의 댓글