상대 단위 em, rem

카테고리 없음

뜐🐸 2024. 10. 11. 19:48

css 입문 과정에서 가장 많이 사용하는 단위는 px(픽셀)입니다. 픽셀은 절대 길이 단위입니다.
어떤 상황에서도 동일한 값을 유지하므로 가변성이 없습니다. 반응형 웹을 만들기에는 적합하지 않습니다.

반면 em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위입니다.
em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미합니다.
각 단위는 주어진 크기의 배수를 요소 크기로 설정하는 단위입니다.

이 때 루트 요소란 <html>요소를 말합니다. 루트 요소의 글자 크기 기본값은 16px입니다.

<div style="font-size: 20px">
  <p>자식 요소의 1em은 20px!</p>
  <p>자식 요소의 2em은 40px!</p>
</div>

+) 추가적으로 em 으로 내/외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 하게 됩니다!