[CSS] px, 해상도, em, rem란

웹 퍼블리싱에서 크기를 지정할 때
px, rem, em 같은 단위를 자주 사용합니다.
각 단위는 해상도와 반응형, 접근성과 밀접한 관계가 있습니다.

 

1. px과 해상도

px(pixel)은 화면을 구성하는 가장 작은 점 단위입니다.

font-size: 16px;

• 고정된 크기
• 해상도와 상관없이 항상 같은 값
• 예측 가능하지만 반응형에는 한계가 있음

다양한 기기 해상도 환경에서는
px만 사용하는 방식은 유연성이 떨어집니다.

 

2. rem (Root em)

rem은 html(root) 요소의 font-size를 기준으로 크기를 계산합니다.

html {
  font-size: 16px;
}

p {
  font-size: 1rem; /* 16px */
}

• 전역 기준으로 크기 조절 가능
• 반응형·접근성에 유리
• 실무에서 가장 많이 사용

디자인 시스템의 기본 단위

 

3. em

1️⃣ em은 부모 요소의 font-size 기준으로 계산됩니다.

.card {
  font-size: 16px;
}

.card__title {
  font-size: 1.5em; /* 24px */
}

• 컴포넌트 내부 비율 조절에 유리
• 중첩되면 계산이 복잡해질 수 있음

 

2️⃣ em 단위의 기준이 달라지는 경우

 

em은 기본적으로 font-size를 기준으로 계산되는 상대 단위이지만,
어떤 속성에 사용하느냐에 따라 기준이 달라진다는 점을 주의해야 합니다.

 

• font-size에 em을 사용할 경우
  → 부모 요소의 font-size를 기준으로 계산된다.
• padding, margin, width 등 font-size를 제외한 다른 속성에 em을 사용할 경우
  → 자기 자신의 font-size를 기준으로 계산된다.

.card {
  font-size: 16px;
}

.card__title {
  font-size: 1.5em; /* 24px (부모 기준) */
  padding: 1em;     /* 24px (자기 자신 font-size 기준) */
}

 

이러한 특성 덕분에 em은
글자 크기에 비례해 내부 여백과 크기를 함께 조절해야 하는 컴포넌트에 특히 유용하다.
다만, 중첩이 깊어질 경우 계산이 복잡해질 수 있으므로 선택적으로 사용하는 것이 좋다.

 

 

정리하면

 

px는 고정 크기,
rem은 전체 기준 단위,
em은 font-size 기반 비율 조정 단위이다