px ↔ rem/em 변환기
CSS 픽셀 값을 rem 및 em 단위로 변환하고, 역방향 변환도 지원합니다. 변환 참조표 포함.
px
px
예: 24
자주 쓰는 변환 값 (기준 16px)
| PX | REM |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
사용 방법
CSS 픽셀 값을 rem 및 em 단위로 변환하고, 역방향 변환도 지원합니다. 변환 참조표 포함.
- 1상단 '설정' 섹션에서 기본 폰트 크기(기본값 16px)를 프로젝트의 html 요소에 설정된 루트 폰트 크기와 맞게 조정하세요.
- 2px를 rem/em으로 변환하려면: 'PX → REM/EM' 탭을 클릭하고, 입력 필드에 픽셀 값을 입력하면 rem과 em 결과가 즉시 나타납니다.
- 3각 결과 카드에는 변환 공식(예: 24px ÷ 16 = 1.5rem)이 표시됩니다 — 코드 이해나 주석 작성에 유용합니다.
- 4rem 또는 em을 px로 다시 변환하려면: 'REM/EM → PX' 탭을 클릭하고 rem 또는 em 값을 입력하면 픽셀 값이 표시됩니다.
- 5하단의 '자주 쓰는 변환 값' 표는 기준 16px에서 10가지 표준 픽셀 값과 rem 값을 빠르게 참조할 수 있습니다.
주요 기능
- 양방향 변환 — px를 rem/em으로, rem/em을 px로 변환
- 기본 및 부모 폰트 크기 설정 가능 — 실제 프로젝트 설정에 맞게 조정
- 실시간 공식 표시 — 각 변환에 대한 정확한 수식 표시
- rem, em, px 결과에 대한 원클릭 복사
- 변환 참조표 — 빠른 검색을 위한 기준 16px에서 10가지 표준 픽셀 값