CSS - px, %, em, rem

CSS에서 사용되는 단위는  px, %, em, rem 가 있다.

그 차이에 대해 알아보자

 

 

em

em은 같은 엘리먼트에서 지정된 자기 자신의 font-size를 기준으로 px로 바뀌어 화면에 표시

 

rem

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환, 보통 HTML tag에서 지정된 font-size가 기준이된다.

 

px

px는 절대적인 값입니다. 다른요소의 값에 영향을 받지 않습니다.

 

%

%는 상대적인 값입니다. %는 주로 박스이 길이를 화면 크기에 맞추어야할 때 사용한다.

 

더 알아보기

 

vw

vw는 Vieprt Width

 

vh는 Viewport Height 

 

둘다 뷰포트를 기준으로한 단위로서 보여지는 영역에서 얼만큼 차지할 것인지를 지정하는 단위

 

1vw = 5px; -> 1vw = 뷰포트 너비의 1%를 뜻함