CSS 단위 변환
px · rem · em · pt · % · 자주 쓰는 크기표
CSS 단위 변환
px·rem·em·pt·% 를 서로 바꿉니다. 루트 기준과 부모 기준을 나란히
루트 글자 크기 (html)
부모 글자 크기 (em 기준)
숫자
단위
px24
rem (루트 기준)1.5rem
em (부모 기준)1.5em
pt18pt
부모 대비 %150%
자주 쓰는 크기 — px → rem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
32px2rem
40px2.5rem
48px3rem
64px4rem
rem 은 루트 기준, em 은 부모 기준입니다 — 같은 숫자라도 크기가 다릅니다.
px, rem, em, pt, 퍼센트를 서로 변환합니다. 루트 글자 크기와 부모 글자 크기를 각각 지정해 rem 과 em 을 나란히 볼 수 있습니다.
이렇게도 부른다 — unit
쓰는 법
- 루트와 부모 글자 크기 확인
- 값과 단위 입력
- 변환 결과 확인
자주 묻는 질문
- rem 과 em 의 차이가 뭔가요?
- rem 은 문서 루트의 글자 크기가 기준이고, em 은 부모 요소의 글자 크기가 기준입니다. 같은 1.5 라도 상황에 따라 다른 크기가 됩니다.
- 왜 16으로 나누나요?
- 대부분의 브라우저에서 기본 글자 크기가 16px 이기 때문입니다. 루트 크기를 바꿨다면 그 값으로 나눠야 합니다.
- pt 는 언제 쓰나요?
- 인쇄 쪽 단위입니다. 웹에서는 1pt 가 약 1.333px 로 환산됩니다.
다른 도구
기기 안에서만 넣은 내용은 브라우저 안에서만 처리되며 어디에도 저장·전송되지 않습니다.