CSS size : rem, em, px


css size matter

CSS에서 텍스트의 크기, 박스의 크기 등을 지정하기 위한 사이즈는 px, rem, em 등의 단위를 이용합니다. 조금씩 헷갈리는 각각의 단위의 차이점과 사용법을 간단하게 확인해 보겠습니다.

px

픽셀 (pixel, px)은 폰트와 HTML요소의 크리를 지정하는 표준 단위입니다.

rem

rem 값은 html 루트 요소의 font-size를 기준으로 글꼴 크기를 표시하게 됩니다.

예를 들어 루트 html 요소에 폰트의 크기를 20px로 정의하고, 하위 요소에서 폰트 크기를 0.75rem 으로 정의하면 해당 요소의 폰트 사이즈는 15px이 됩니다.

html {
  font-size: 20px;
}

p {
  font-size: 0.75rem; /* 15 px */
}

중요!

대부분의 웹 브라우저에서는 기본적으로 1rem16px 로 지정합니다. 따라서 2rem32px 이 됩니다.

em

em 값은 요소의 부모에 지정한 크기에 따라 해당 요소의 크기가 결정되게 됩니다. 예를들어, 부모 요소의 폰트 크기가 20px일 경우, 자식 요소의 1em은 20px로 지정됩니다. 따라서 폰트 크기를 0.75em으로 지정하면 실제 크기는 15px이 되게 됩니다.

.parent {
  font-size: 20px;
}

.child {
  font-size: 0.75em; /* 15 px */
}

만약 em을 사용할 경우, 크기를 지정해 놓은 속성이 문서 트리에 얽혀 있으면 정확한 요소의 크기를 예측하기 어려울 수도 있습니다. 이러한 특징때문에 최근에는 em 보다는 rem과 px을 많이 사용하는 추세입니다.

pt

포인트 (point, pt) 단위는 12pt가 16px에 해당하는 단위입니다. pt 단위를 사용하는 케이스는 보기 힘든것 같습니다.

SHARE