CSS - vw & vh 단위, em & rem 단위

 

자주 사용하는 CSS 단위에 대해 정리해보자.

 

 

vw & vh 단위

vw

브라우저 창 너비값 * 0.01 단위이다.

예를 들어, width를 100vw로 지정하면 너비에 꽉 차게 된다.

'viewport width'을 뜻한다.

 

vh

브라우저 창 높이값 * 0.01 단위이다.

예를 들어, height를 100vh로 지정하면 높이에 꽉 차게 된다.

'viewport height'을 뜻한다.

 

반응형 웹을 위해 미디어 쿼리를 작성할 때 요긴하게 쓰인다.

vw단위를 높이에 지정하거나, vh단위를 너비를 지정할 때 사용해도 무방하다.

 

 

em & rem 단위

em

부모 요소의 폰트사이즈 값이다.

예를 들어, font-size를 1em으로 지정하면 부모와 동일한 폰트사이즈를 갖는다.

'알파벳 m'을 뜻한다.

 

rem

최상위 요소(html 태그)의 폰트사이즈 값이다.

웹브라우저는 1rem의 기본값이 16px이다.

'root em'을 뜻한다.

 

em과 rem은 폰트 외에 margin, padding, width, height 등의 크기 지정에도 적용할 수 있다.

em을 사용하면 부모 요소에 따라 기준값이 변할 수 있기 때문에 다른 컴포넌트에 있는 요소 간의 폰트 사이즈 지정 시 헷갈릴 수 있다.

이런 경우에는 인해 em보다 rem을 사용하는 것이 더 간결하고 명확하다.

한편, 폰트 사이즈에 따라 margin, width 등의 변화를 주고 싶다면 em을 사용하는 것이 더 적합하다.

 

기타

calc()

단위를 사용한 값과 상수값을 산술연산한 결과를 속성값으로 쓰고 싶은 경우에 사용한다.

width: calc(80vw - 100px);
height: calc(100vh / 12);