CSS 길이 단위 정리: px, em, rem

요즘 관심사인 디자인시스템 개발 및 유지보수 중에서 픽셀에 대한 내용을 정리하는 글입니다.

CSS에서는 다양한 길이 단위를 사용하여 요소의 크기, 여백, 글꼴 크기 등을 조절합니다. 그중에서도 가장 많이 사용되는 단위인 px, em, rem에 대해 자세히 살펴보겠습니다.

---

📏 px (픽셀)

• 절대 단위로, 화면의 물리적 픽셀과 직접적으로 연결됩니다.
• 디스플레이의 해상도에 관계없이 항상 일정한 크기를 유지합니다.
• 주로 사용되는 경우:
  • 테두리(border) 두께
  • 이미지 크기
  • 미디어 쿼리의 브레이크포인트 설정
• 단점:
  • 사용자의 접근성 설정(글자 확대 등)에 영향을 받지 않아, 가독성 저하 가능성이 있습니다.

---

🔠 em (element multiplier)

• 상대 단위로, 부모 요소의 font-size를 기준으로 계산됩니다.

• 누적 계산이 되므로, 여러 단계 중첩 시 예상하지 못한 크기가 될 수 있습니다.

• 사용 예시:

  .parent {
    font-size: 16px;
  }
  
  .child {
    font-size: 1.5em; /* 24px */
  }

• 주로 사용되는 경우:

  • 글꼴 크기
  • 내부 여백(padding) 및 외부 여백(margin)

---

🔤 rem (root em)

• 상대 단위이지만, em과 달리 루트 요소()의 font-size를 기준으로 합니다.
• 계층 구조와 상관없이 일관된 크기를 유지할 수 있어 예측이 용이합니다.
• 주로 사용되는 경우:
  • 전체적인 레이아웃 크기
  • 일관된 타이포그래피 시스템

---

🤔 단위 선택 시 고려사항

항목	px	em	rem
기준	고정값	부모 요소 크기	html 요소 크기
유연성	낮음	중간	높음
계산 용이성	쉬움	복잡할 수 있음	쉬움
접근성 대응	❌	✅	✅

• 반응형 웹에서는 rem 또는 em을 주로 사용하는 것이 바람직합니다.
• rem은 계산이 단순하고 일관성이 있어 가이드라인에서 추천됩니다.

---

💁 Rem 단위를 사용하는 방법

1. 기본 설정

html {
  font-size: 62.5%; /* 1rem = 10px */
}

• 브라우저의 기본 font-size가 16px일 때, 62.5%는 10px이므로 계산이 쉬워집니다.

2. rem 계산 예시

px 값	rem 값
16px	1.6rem
20px	2rem
24px	2.4rem

3. SCSS 함수로 계산 간편화

@function rem($px) {
  @return #{$px / 10}rem;
}

.box {
  width: rem(100); // 10rem
  padding: rem(20) rem(80); // 2rem 8rem
}

4. 반응형 대응

@media (max-width: 768px) {
  html {
    font-size: 50%; /* 1rem = 8px */
  }
}

@media (min-width: 50rem) {
  /* 반응형 스타일 정의 */
}

---

✅ 결론

• px은 고정적인 디자인 요소에 적합하지만, 접근성과 반응형 측면에서는 유연성이 부족합니다.
• em은 계층적 스타일 조정에 유용하지만 계산이 복잡할 수 있습니다.
• rem은 일관된 레이아웃과 반응형 웹 구현에 가장 추천되는 단위입니다.

적절한 단위 선택과 조합을 통해 다양한 디바이스 환경에서도 최적의 사용자 경험을 제공할 수 있습니다.