CSS px ↔ rem 변환기

CSS 단위인 px와 rem을 상호 변환합니다.

CSS 단위 변환기

픽셀(px)을 rem 단위로 변환합니다.

기본 폰트 크기 (px)

픽셀 (px)

rem

CSS 단위 설명

px (픽셀)

절대 단위로, 화면의 픽셀 하나를 의미합니다. 고정된 크기를 가지며 반응형 디자인에는 제한적입니다.

rem (Root EM)

상대 단위로, 루트 요소(html)의 폰트 크기를 기준으로 합니다. 접근성과 반응형 디자인에 유리합니다.

변환 공식

px → rem: px ÷ 기본폰트크기

rem → px: rem × 기본폰트크기

사용 권장사항

• 폰트 크기: rem 사용 권장
• 여백(margin, padding): rem 권장
• 테두리: px 사용 가능
• 미디어 쿼리: rem 권장

일반적인 변환값

rem

8px

0.5rem

12px

0.75rem

14px

0.875rem

16px

1rem

18px

1.125rem

20px

1.25rem

24px

1.5rem

32px

2rem

CSS 단위 완벽 가이드

웹 개발에서 올바른 CSS 단위 선택은 사용자 경험과 접근성에 큰 영향을 미칩니다. px와 rem의 차이점을 이해하고 적절한 상황에서 사용하는 방법을 알아보세요.

픽셀(px) 단위 심화 가이드

📐 특징

• 절대 단위로 화면 픽셀과 1:1 대응
• 모든 브라우저에서 일관된 크기 보장
• 정밀한 레이아웃 제어 가능
• 사용자 설정에 영향받지 않음

✅ 사용 권장 상황

• 테두리 두께 (1px, 2px)
• 그림자 오프셋
• 아이콘 크기 (16px, 24px)
• 미세한 간격 조정

⚠️ 주의사항

• 사용자 폰트 크기 설정 무시
• 접근성 문제 발생 가능
• 반응형 디자인에 제한적

rem 단위 심화 가이드

📐 특징

• 루트 요소(html) 폰트 크기 기준
• 사용자 설정 반영
• 일관된 비율 유지
• 접근성 친화적

✅ 사용 권장 상황

• 폰트 크기 설정
• 여백(margin, padding)
• 컨테이너 크기
• 미디어 쿼리 브레이크포인트

💡 장점

• 확대/축소 시 비율 유지
• 접근성 향상
• 유지보수 용이

실무 적용 가이드

🎯 단위별 사용 전략

타이포그래피

폰트 크기, 줄 간격은 rem 사용 rem

레이아웃

여백, 컨테이너는 rem 권장 rem

디테일

테두리, 그림자는 px 사용 px

📱 반응형 디자인 팁

모바일 우선 접근

기본 폰트 크기를 16px로 설정하고, rem 단위로 확장

html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }

미디어 쿼리 활용

rem 기반 브레이크포인트로 일관성 유지

@media (min-width: 48rem) { /* 768px */ }
  html { font-size: 18px; }
}

♿ 접근성 고려사항

✅ 권장사항

• rem 단위로 폰트 크기 설정
• 최소 폰트 크기 16px 유지
• 충분한 줄 간격 (1.5 이상)
• 터치 타겟 최소 44px

❌ 피해야 할 것

• 폰트 크기에 px 고정값 사용
• 12px 이하 작은 텍스트
• 고정된 컨테이너 너비
• 줄 간격 1.0 이하

🔧 브라우저 지원 및 호환성

px 단위

모든 브라우저에서 완벽 지원. IE6+부터 사용 가능.

rem 단위

IE9+, 모던 브라우저 완벽 지원. IE8 이하는 폴백 필요.

IE8 지원이 필요한 경우: px 값을 먼저 선언하고 rem 값을 추가로 선언하여 폴백 제공

font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */