[css] 스타일링 유닛 (px, em, rem 등)의 차이점

22 Dec 2023

CSS에서는 길이, 폭, 높이 등을 정의할 때 픽셀(px), em, rem 등 다양한 유닛을 사용할 수 있습니다. 각각의 유닛은 서로 다른 특징과 용도가 있으며, 선택하는 것은 디자인과 레이아웃을 조절하는 데 중요한 요소입니다.

픽셀(px)

픽셀은 화면 해상도에 따라 크기가 변하지 않으며, 고정된 크기를 가집니다. 픽셀은 사용자가 확대/축소를 해도 크기가 변하지 않기 때문에 레이아웃의 안정성을 보장해줍니다. 하지만, 고밀도 디스플레이(e.g., 레티나 디스플레이)에서는 화면이 깨질 수 있는 문제가 있습니다.

.example {
  font-size: 16px;
  padding: 20px;
}

em

em은 감싸고 있는 요소의 폰트 크기에 따라 상대적으로 크기를 조절합니다. 상위 요소의 폰트 크기에 따라 상대적인 크기를 유지하기 때문에 유연한 레이아웃을 만드는 데 적합합니다. 하지만, 중첩된 요소의 경우 계산이 복잡해질 수 있고, 의도치 않은 크기 조정이 발생할 수 있습니다.

.example {
  font-size: 1.2em;
  margin: 1.5em;
}

rem

rem은 루트 요소(일반적으로 <html>)의 폰트 크기에 상대적으로 크기를 조절합니다. em과 유사하지만 중첩된 요소의 영향을 받지 않기 때문에 더욱 예측 가능하고 유지보수가 쉬운 레이아웃을 구성할 수 있습니다.

.example {
  font-size: 1.2rem;
  margin: 1.5rem;
}

다양한 CSS 스타일링 유닛을 이용하여 디자인과 레이아웃의 안정성 및 유연성을 고려하여 적절한 유닛을 선택해야 합니다.