px | em | rem 단위
CSS에서는 요소의 크기를 지정할 때, px, em, rem 단위를 주로 사용하는데요. 이 외에도 %와 vw, vh가 있지만 비교적 간단하므로 오늘은 px, em, rem 3가지에 대해서 포스팅 해보려 합니다. 아래 설명드린 px 단위와 em을 이해한다면 rem 단위는 자연스럽게 이해될 것 입니다.
절대적 단위 px(픽셀)
px 단위는 주변에 어떠한 상관관계 없이 지정한 값만큼 크기가 고정되어 표시됩니다. 어떠한 기기에서든 같은 크기로 보이는 단위이므로 고정된 크기의 값을 표현할 때 사용하면 적합한 단위입니다.
모바일 기기에서 보든 영화 스크린에서 보든 똑같은 크기로 보입니다.
상대적 단위 : em, rem
상대적 단위인 em, rem은 기준으로 하는 대상이 다릅니다. em은 자신이 속한 부모 요소의 폰트 사이즈를 기준으로 자신의 크기가 결정되는데요.
em 단위
- 부모 요소의 폰트 크기 : 16px
- 자식 요소의 폰트 크기를 2em
- 자식 요소 폰트 사이즈를 px로 계산하면 32px
이 처럼 em 단위는 부모 요소의 폰트 크기를 기준으로 측정됩니다. 여기서 중요한 점은 위 폰트 크기를 2em으로 지정한 요소에 다시 자식 요소를 만들어 2em의 폰트 크기를 지정한다면, 64px 크기로 계산됩니다.
이 말은 꼭 필요한 경우에만 em 단위를 사용해야지 자식 요소들에게 em 단위를 남발하게 되면 정확한 사이즈 계산이 어려워질 수 있습니다.
rem 단위
rem 단위는 브라우저의 기본 폰트 크기를 기준으로 자신의 크기가 계산됩니다. em 단위처럼 부모 요소를 기준으로 하지 않기 때문에 어떤 부모 아래에 위치하든 같은 크기를 유지할 수 있습니다.
다시 한번 복습해보자면 em과 rem 단위는 기본적으로 폰트 크기를 기준으로 하는데, em은 부모 요소의 폰트 크기, rem은 브라우저의 폰트 크기를 기준으로 합니다.
예시)
<A요소>
<B요소/>
<C요소/>
</A 요소>
브라우저 폰트 크기 : 16px / A부모 요소 폰트 크기 : 20px
B 자식 요소 폰트 크기 - 3em = 48px
C 자식 요소 폰트 크기 - 3rem = 60px