미분류

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

CSS Unitempxrem

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

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은 일관된 레이아웃과 반응형 웹 구현에 가장 추천되는 단위입니다.

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