[css] 사이즈 단위 px, rem, em, vh, vw 차이 (반응형 화면 제작에 유용)

CSS를 공부하다 보면 사이즈가 하나가 아니라는 것을 알게 됩니다. 포토샵 좀 써보신 분이라면 가장 기본이 되는 px 단위에 대해서는 대충 알고 계시겠지만, 오늘은 이 CSS의 자주 쓰이는 단위에 대해 제대로 정리해 보고자 합니다.

PX

가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다.

em

em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다.

<div class="parent">
  <div class="child"></div>
</div>

.parent{ font-size:12px }
.child{ font-size:1.2em }

다음과 같이 부모 요소를 12px로 정의했을 때 자식 요소를 1.2em 으로 정의하면 자식 요소는 12px*1.2=14.4px로 정의됩니다.

 

자식요소에 중첩으로 1.2em을 주자 1.2배 씩 점점 커진다.

 

rem

rem은 root em의 약자입니다. 즉 위와 같은 공식을 가장 최상단(root) 기준으로 맞추겠다는 소리인데요. 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다.

html{ font-size:12px }
div{ font-size:1.2rem }

최상위 요소를 기준으로 하기 때문에 아무리 중첩되어도 최상위 요소를 기준으로 한 1.2*12px의 사이즈를 갖는다.

 

이 rem 시스템은 모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용하기에 유용합니다.

vh/vw

vh와 vw는 각각 verticah height, vertical width의 약자입니다. 이것들은 뷰포트(화면의 크기)의 높이와 너비에 비례합니다. 이 단위는 반응형 페이지를 만들 때 아주아주 유용하게 사용될 수 있습니다.

1vh는 실제 높이값의 1/100을 나타냅니다. 즉 눈에 보이는 화면 높이가 1000px일 때 1vh는 10px이 됩니다.

 

div{ height:50vh; width:100vw; }

 

가로의 길이에 따라 달라지지는 div의 크기

이 단위의 장점은 보이시는 대로 항상 눈에 보이는 디스플레이의 일정 비율을 차지하도록 만들어지기 때문에 사용자가 화면의 크기를 임의로 줄였다 늘였다 해도, 콘텐츠가 화면의 일정 비율을 항상 차지하게 해서 예쁜 구조를 유지할 수 있다는 점입니다. 데스크탑과 모바일에서 동시에 운영되는 사이트를 제작할 때 유용할 것 같습니다.