왜 CSS에 Rem 단위를 사용해야 하는지와 픽셀에서 변환하는 방법

Source: Dev.to

변환

1rem = 루트 요소의 폰트 크기(보통 기본값은 16 px).

변환 방법:

rem = px / 16

참조 표

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
28px = 1.75rem
32px = 2rem
36px = 2.25rem
40px = 2.5rem
48px = 3rem
64px = 4rem

rem을 사용할 곳, 픽셀을 유지할 곳

rem을 사용할 경우

• 글꼴 크기 (항상)
• 텍스트 인접 요소의 간격 및 패딩
• 읽기 쉬운 텍스트 컨테이너의 최대 너비
• 미디어 쿼리 브레이크포인트 (하지만 항상 브라우저 기본값 사용)

픽셀을 유지할 경우

• 테두리 (1 px 테두리는 1 px 그대로 유지)
• 박스 그림자
• 아주 작은 장식 요소
• 외곽선

이유: 테두리와 그림자는 텍스트 크기에 맞춰 스케일링될 필요가 없는 시각적 장식입니다. 1 px 테두리는 어떤 확대 수준에서도 보이지만, 14 px 글꼴은 확대하면 읽기 어려워집니다.

CSS 사용자 정의 속성으로 더 쉽게

맞춤 속성으로 간격 스케일을 정의하면 rem 값을 외우지 않아도 됩니다:

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
}

.card {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

이제 개별 픽셀 값이 아니라 디자인 시스템을 기준으로 생각하게 되며, 모든 값이 사용자 환경 설정에 따라 자동으로 스케일됩니다.

PostCSS와 Sass 함수

Sass 함수

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

.heading {
  font-size: rem(24);      // 1.5rem
  margin-bottom: rem(16); // 1rem
}

PostCSS

postcss-pxtorem 플러그인을 사용하면 컴파일된 CSS에서 px 값을 구성 가능한 루트 값에 따라 자동으로 rem으로 변환할 수 있습니다.

rem 구현 테스트

1. 브라우저 설정을 엽니다.
2. 기본 폰트 크기를 변경합니다(예: 24 px).
3. 사이트를 새로 고칩니다.

rem을 사용한 모든 요소는 비례적으로 스케일링되고, 픽셀을 사용한 요소는 고정된 채로 남습니다. 네비게이션 텍스트는 커지지만 컨테이너가 변하지 않으면 픽셀/rem 불일치를 발견한 것입니다.

빠른 변환 도구가 제공됩니다 – 단일 값과 배치 변환을 기본 크기에 관계없이 처리합니다. CSS를 작성하면서 열어두면 시간을 절약할 수 있습니다.