px, em, rem? 헷갈리는 CSS 단위 정리 (CSS Units Guide)

웹 페이지를 디자인할 때 빠지지 않는 것이 바로 텍스트와 레이아웃의 크기입니다. 이때 사용하는 CSS 단위는 디테일한 표현을 위한 핵심 요소입니다. 하지만 "px", "em", "rem" 같은 단위를 정확히 이해하지 못하면 디자인이 화면마다 다르게 보이거나, 접근성에 취약한 결과를 낳을 수 있습니다. 이 글에서는 각 단위의 특징과 실전 사용법을 자세히 정리합니다.

---

1. "px" (픽셀)

"px"는 디지털 화면에서 고정된 크기를 의미하는 "절대 단위"입니다. 가장 직관적이고 예측 가능한 단위로, 많은 디자이너와 개발자들이 익숙하게 사용하는 방식입니다.

예를 들어 "16px"로 폰트 크기를 설정하면, 해당 텍스트는 어떤 상황에서도 16개의 화면 픽셀 높이로 표시됩니다. 이는 정밀한 위치 조정이 필요하거나 작은 아이콘, 테두리 등을 다룰 때 유리합니다.

하지만 단점도 있습니다. 고해상도 디스플레이(예: Retina 디스플레이, 4K 모니터)에서는 픽셀이 촘촘하기 때문에 "16px"도 상대적으로 작게 보여 가독성이 떨어질 수 있습니다. 또한 시력이 약한 사용자가 확대 설정을 해도, 픽셀 단위는 이에 반응하지 않아 "접근성" 측면에서 불리합니다.

예제

body {
  font-size: 16px; /* 고정된 크기로 설정됨 */
}

특징:

• "절대 크기" 단위로 항상 동일한 픽셀 크기를 유지
• 다양한 해상도나 확대 환경에서 유연하지 않음
• 정밀한 디자인에 적합하지만 "반응형 디자인"에는 불리함
• 고해상도 화면에서 작게 보여질 수 있음

---

2. "em" (부모 기준 상대 단위)

"em"은 해당 요소의 "부모 요소의 폰트 크기"를 기준으로 계산되는 "상대 단위"입니다. 이는 계층적으로 스타일이 적용되는 CSS의 특성과 잘 맞아, 내부 요소들의 크기를 유동적으로 조절할 수 있게 해줍니다.

예를 들어 부모 요소가 20px일 때, 자식 요소에 "1.2em"을 지정하면 최종 크기는 24px이 됩니다. 하지만 중첩된 구조에서는 부모 크기에 계속 영향을 받기 때문에 예상치 못한 결과가 나올 수 있습니다.

예제

.container {
  font-size: 20px;
}
.container p {
  font-size: 1.2em; /* 부모가 20px이므로 결과는 24px */
}

특징:

• 부모의 폰트 크기를 기준으로 상대 계산
• 중첩 구조에서는 누적되어 가독성이 떨어질 수 있음
• 특정 영역 내 폰트 비율 조정에 유리함

---

3. "rem" (루트 기준 상대 단위)

"rem"은 "root em"의 줄임말로, 브라우저의 기본 글꼴 크기 또는 HTML 요소의 폰트 크기를 기준으로 계산되는 단위입니다. 기본적으로 HTML의 font-size가 16px이면, "1rem"은 16px이 됩니다.

"rem"은 부모 요소와 무관하게 계산되므로, 일관된 크기를 유지하면서도 상대적인 설정이 가능해 관리와 유지보수에 유리합니다. 특히 반응형 디자인이나 접근성을 고려할 때 많이 사용됩니다.

예제

html {
  font-size: 16px;
}
p {
  font-size: 1.5rem; /* 결과적으로 24px */
}

특징:

• HTML 요소의 폰트 크기를 기준으로 계산
• 계층에 상관없이 일관된 크기를 유지
• 설계와 유지보수가 쉬움

---

4. 기타 상대 단위

단위	기준 요소	설명	대표 사용 예시
"px"	고정 픽셀	디바이스의 해상도와 무관하게 고정 크기를 유지	테두리, 아이콘, 스크롤바 등
"em"	부모 요소의 폰트 크기	중첩 구조에서 누적 가능성이 있음	내부 텍스트 비율 조정
"rem"	루트(html) 폰트 크기	구조에 상관없이 항상 일정한 크기	전체적인 폰트/마진 설정
"%"	부모 요소의 상대 크기	너비/높이 조정에 자주 사용	이미지 비율, 칼럼 너비
"vw"	뷰포트 너비	화면의 가로폭에 따른 반응형 조정	풀화면 배너, 큰 타이틀 텍스트
"vh"	뷰포트 높이	화면의 높이에 따라 요소 크기 조절	Hero 영역, 슬라이더 높이 등

---

em vs rem: 시각적 이해 예시

html {
  font-size: 16px;
}
.wrapper {
  font-size: 20px;
}
.wrapper p {
  font-size: 1.5em; /* 30px, wrapper 기준 */
}
.wrapper .fixed {
  font-size: 1.5rem; /* 24px, html 기준 */
}

• "em"은 부모인 .wrapper의 font-size(20px)에 따라 30px이 됨
• "rem"은 항상 루트(html)의 font-size(16px)을 기준으로 24px이 됨

---

어떤 상황에 어떤 단위를 써야 할까?

• "px"은 정밀한 위치 조정이 필요하거나 간단한 요소에만 적용할 때 적합합니다.
• "em"은 로컬 컨텍스트에서 유연한 비율 조정이 필요할 때 유용합니다.
• "rem"은 전체 사이트에서 일관된 크기 체계를 유지하고 싶을 때 가장 권장됩니다.
• "%", "vw", "vh"는 반응형 레이아웃에서 화면 크기에 따라 동적으로 구성할 때 사용됩니다.

---