css로 디자인을 짤 때, px로 하면 직관적으로 알 수 있어 편하다.
하지만, 모든 데스크탑의 크기가 일치하는 것이 아니기 때문에 현업에서는 반응형으로 rem을 쓴다.
1rem = 16px
보통, 1rem을 16px로 알고 있는 경우가 많다.
하지만, 루트 글꼴 크기를 직접 설정할 경우, 그 크기가 1rem의 기준이 된다.
예를 들어, 개발자가 루트 글꼴 크기를 20px로 설정할 경우, 1rem = 24px이 되는 것이다.
그렇다면, rem과 em의 차이는 무엇일까?
rem: 브라우저의 루트 글꼴 크기의 배수로 적용.
em: 텍스트를 포함하는 엘리먼트의 배수로 적용.
px
css3의 가장 기본적인 크기 단위이다.
직관적인 크기를 알 수 있어 좋지만, 반응형 웹에서는 좋지 않은 단위이다.
%
부모 엘리먼트의 크기에 따라 %가 차지하게 되는 단위이다.
vh
viewport height의 줄임말로, viewport는 웹사이트에서 보여지는 영역을 의미한다.
아래 gif는 50vh로 설정했을 때, 브라우저의 크기가 줄어들면 줄어든 브라우저의 크기에 맞게 부모 엘리먼트의 50%의 크기를 유지하면서 줄어든다.
1vh = 1%
vw
viewport weight의 줄임말이다.
vh의 weight 버전이다.
1vw = 1%
em
부모 엘리먼트의 font 크기를 기준으로 한 단위이다.
1em = (부모 엘리먼트의) font-size
만일, 부모 엘리먼트의 font-size가 20px이고, 자식 엘리먼트의 크기가 2em이면 자식 엘리먼트는 40px인 것이다.
rem
최상위 엘리먼트의 font 크기를 기준으로 한 단위이다.
1rem = (최상위 엘리먼트의) font-size
만일, 최상위(예, Wrapper) 엘리먼트의 font-size가 20px이고, 현재 엘리먼트의 크기가 2rem이면 현재 엘리먼트는 40px인 것이다.
