px, rem, em, vw 단위를 서로 변환
px·rem·em·vw·vh·%를 서로 변환합니다. 루트 글자 크기와 뷰포트 너비를 넣으면 디자인 시스템에 맞는 숫자로 계산할 수 있습니다.
rem은 루트 폰트, vw·%는 뷰포트 너비 기준.
시안은 px, 코드는 rem일 때 계산기 없이 넘길 수 있습니다.
vw는 화면 너비에 따라 달라지므로 작업 중인 브레이크포인트 너비를 넣으세요.
사용 방법
- 숫자와 단위 선택
- 루트·뷰포트 확인
- CSS에 복사
이럴 때
- 루트 16이 아닐 때 rem 실수 방지
- 40vw가 몇 px인지 확인
- 가입 없이 바로
상황
- Figma px → CSS rem
- 노트북 너비에서 vw 확인
- rem·em 차이 설명
팁
- em은 간단히 부모=루트로 둡니다. 컴포넌트 폰트가 다르면 조정하세요.
- 왕복 변환에 아주 작은 오차가 날 수 있습니다.
예시
| 입력 | 출력 | 설명 |
|---|---|---|
| 16px → rem (루트 16) | 1rem | — |
| 1280px 너비에서 50vw | 640px | — |
자주 묻는 질문
- rem 기준은?
- 여기서 지정한 루트 폰트 크기(보통 16px). html font-size가 다르면 맞춰 주세요.
- %와 vw가 같나요?
- 항상 같지는 않습니다. 여기서는 %도 뷰포트 너비를 참조로 근사합니다.