CSS 단위 변환기
px, rem, em, pt, %, vw, vh 간에 CSS 단위를 변환합니다. 사용자 정의 기본 글꼴 크기와 뷰포트 설정으로 반응형 단위를 계산합니다.
변환 설정
rem/em 계산을 위한 기본 글꼴 크기
vw 계산을 위한 뷰포트 너비
vh 계산을 위한 뷰포트 높이
px에서 rem로 변환 표
| 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 단위 변환기 사용 방법
- 입력 필드에 숫자 값을 입력하세요
- 변환 전 단위를 선택하세요
- 변환 후 단위를 선택하세요
- 필요한 경우 기본 글꼴 크기와 뷰포트 설정을 조정하세요
- 변환 버튼을 클릭하여 결과를 확인하세요
지원되는 CSS 단위
- px (픽셀) - 절대 단위, 대부분의 화면에서 1px = 1/96인치
- rem (루트 Em) - 루트 요소의 글꼴 크기 기준, 일반적으로 16px
- em (Em) - 부모 요소의 글꼴 크기 기준
- pt (포인트) - 절대 단위, 인쇄에서 주로 사용 (1pt = 1/72인치)
- % (퍼센트) - 부모 요소의 크기 기준
- vw (뷰포트 너비) - 1vw는 뷰포트 너비의 1%와 같습니다
- vh (뷰포트 높이) - 1vh는 뷰포트 높이의 1%와 같습니다
일반적인 CSS 변환
- 16px를 1rem으로 - 표준 기본 글꼴 크기 변환
- 1px를 0.75pt로 - 인쇄용 픽셀에서 포인트로 변환
- 100vw는 뷰포트 너비 - 전체 뷰포트 너비
- 62.5% 트릭 - html 글꼴 크기를 62.5%로 설정하여 1rem = 10px로 계산 쉽게
상대 단위를 사용하는 이유
- 접근성 - 사용자가 브라우저 설정에서 텍스트 크기를 조정하면 디자인이 적응합니다
- 반응형 디자인 - 레이아웃이 다양한 화면 크기에 자연스럽게 확장됩니다
- 유지보수성 - 한 곳에서 기본 크기를 변경하면 전체 디자인이 확장됩니다
- 현대적 표준 - 포용적 디자인을 위한 웹 접근성 지침(WCAG) 준수
- 브라우저에서 완전히 작동하며 서버로 데이터가 전송되지 않습니다
변환 공식
rem = px / 기본-글꼴-크기예: 24px / 16px (기본) = 1.5rem