(CSS) 단위 정리, px, em, rem, vh, vw, %

 

 

css에는 크기를 지정하는 다양한 단위가 있다. 

 

각각의 단위는 어떤 특징을 가지고 있는지,

 

또 특정 상황에서 어떤 단위를 사용하면 좋을지 정리하고자 한다. 

 

 

 

 

 

단위 분류

 

1. px

 

먼저 단위를 상대적인지 절대적인지 나누어 생각해 볼 수 있다.

 

px은 절대적인 단위다. 크기가 고정되어 있다는 뜻이다. 

 

주로 정확한 크기나 위치를 나타내야 할 때 사용된다. 

 

단점으로는 고정되어 있으므로, 반응형 웹을 만들기 어렵다는 것이다. 

 

상대적인 단위들은 고정되어 있지 않고, 유동적으로 변화하기에 반응형 웹을 만들기 용이하다. 

 

 

 

 

2. %

%는 부모 요소를 기준으로 백분율로 크기를 나타낸다.

 

만약 부모 높이가 200px이라면, 유저가 높이를  50%로 주면 높이가 100px로 적용된다. 

 

 

 

3.  vh, vw

vh는 view height의 약자이고, vw는 view width의 약자이다.

 

vh와 vw는 화면(뷰포트)의 높이와 너비에 대해 상대적인 크기를 지정한다. 

 

현재의 화면의 vh와 vw는 각각 100이다. 

 

따라서 현재 화면의 절반 사이즈의 div를 만들고 싶다면 50vh, 50vw를 주면 된다. 

 

vh, vw는 화면 크기 변화에도 일관된 레이아웃을 유지하고 싶을 때 사용하면 유용하다. 

 

 

 

4. em, rem

em은 element, rem은 root element의 약자이다. 

 

em은 폰트에 주로 사용되며, 부모 요소의 폰트 크기에 대해 상대적으로 나타난다.

 

부모의 폰트 사이즈가 30px이고 자식 폰트 사이즈가 2em이라면 

 

30px * 2 = 60px이 적용된다. 

 

 

rem 역시 em과 유사하나, rem은 html 최상위 요소의 폰트 크기에 대해 상대적 크기를 나타낸다. 

 

이때 html 최상위 요소의 폰트 크기는 브라우저마다 다르나 보통 16px이다. 

 

최상위 폰트 사이즈가 16px이고 요소에게 2 rem을 준다면

 

그 요소의 사이즈는 16px * 2 = 32px이 적용된다. 

 

 

 

결론

상대적 vs 절대적

절대적 (absolute)	상대적 (relative)
px	em, rem, vh, vw, %

 

 

사용 대상

레이아웃 (layout)	폰트 (font)
%, vh, vw	em, rem
px