CSS 단위 em/rem/vw/vh

em

em은 상대적인 크기를 가지는 단위이다. 기본적으로 브라우저의 font-size는 16px이라 따로 설정해 두지 않으면 (16*n)em으로 계산된다.

em 단위는 부모 요소가 설정한 글자 크기에 따라 비례하여 계산된다. 

(부모요소의 글자 크기 * n)em

em 단위의 단점은 부모요소에 따라 글자 크기가 지정되기 때문에 계산이 힘들다는 것이다. 

root = 16px = 1em
    body = 0.5em = 8px
        div = 0.5em = 4px

그래서 em 단위는 대부분 폰트 사이즈에 설정하지 않고 버튼의 padding 등 해당 콘텐츠의 글자 크기에 따라 비례하여 반응형 웹이 구현되는 곳에 사용된다.

em 계산하기 

(사용하고자 하는 px) / (기준 크기 px) * 100%

참고로 em은 소수점 3자리까지 가능하다.

rem

(루트 요소의 글자 크기 * n)rem

rem은 root em이라는 뜻으로 루트 요소에 지정한 글자 크기에 비례하여 계산된다. 쉽게 계산하기 위해 글자 크기를 10px로 설정하는 방법도 있다. 

root = 16px = 1rem
    body = 0.5rem = 8px 
        div = 0.5rem = 8px         
    
root = 10px = 1rem
    body = 0.5rem = 5px
        div = 0.5rem = 5px

em과 다른 점은 em은 부모 요소의 글자 크기에 비례해서 계산되지만 rem은 root(html)의 글자 크기에 비례하여 계산된다는 점이다.

그래서 글자 크기나 고정되는 box 사이즈 등에 rem 단위를 많이 사용한다. root 요소의 글자 크기만 변경하면 모든 rem 단위의 크기가 변경되기 때문에 유지 보수에도 좋다.

vh

vh 요소는 높이값의 100분의 1의 단위이다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이다. 뷰포트의 너비값이 750px이면 1vw는 7.5px이다.

참고

Previousborder를 사용한 CSS TriangleNextCheckbox 구현 방법

Last updated

Was this helpful?