CSS 단위 변환기
디자인 시안의 px 은 rem 으로 얼마일까?
기본 글자 16px 이면 1rem 은 16px, 12pt 는 16px 입니다.
CSS Values and Units Level 4 기준 · 1in = 96px = 72pt = 2.54cm · 업데이트
px 로
-
- rem
- -
- em
- -
- pt
- -
- vw
- -
- vh
- -
- %
- -
- cm
- -
- mm
- -
- in
- -
px → rem·pt (기본 글자 16px)
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
결과가 이상한가요?
어떻게 계산했나요
CSS Values and Units Level 4 기준 · 1in = 96px = 72pt = 2.54cm
- 절대 단위(CSS Values and Units Level 4): 1in = 96px = 72pt = 2.54cm, 1pt = 4/3px, 1cm ≈ 37.80px
- rem = 루트(html) 글자 크기, em·% = 부모 글자 크기 기준 (font-size 에 쓸 때). 브라우저 기본은 보통 16px
- vw·vh = 화면(뷰포트) 너비·높이의 1%
- 소수 넷째 자리까지 보여 드립니다. 화면의 실제 길이(인쇄 cm)는 기기 배율에 따라 다릅니다
자주 묻는 질문
rem 과 em 은 무엇이 다른가요?
rem 은 문서 맨 위(html)의 글자 크기 기준이라 어디서 쓰든 같은 크기입니다. em 은 그 요소의 부모 글자 크기 기준이라 안에 겹쳐 쓰면 계속 커지거나 작아집니다. 브라우저 기본 글자 크기는 보통 16px 이라 1rem = 16px 입니다.
1pt 는 몇 px 인가요?
CSS 에서 1in = 96px = 72pt 로 정해져 있어 1pt = 96 ÷ 72 = 약 1.333px, 1px = 0.75pt 입니다. 디자인 시안의 12pt 는 CSS 로 16px 입니다.
왜 글자 크기는 px 대신 rem 을 쓰라고 하나요?
사용자가 브라우저·휴대폰 설정에서 기본 글자 크기를 키우면 rem 은 따라 커지지만 px 은 그대로입니다. 글자가 커져야 하는 사람을 위해 글자 크기는 rem 으로 쓰는 것이 접근성에 좋습니다.
vw·vh 는 어떻게 계산하나요?
1vw 는 화면(뷰포트) 너비의 1%, 1vh 는 높이의 1% 입니다. 375 × 812 화면에서 1vw = 3.75px, 1vh = 8.12px 입니다. 휴대폰은 주소창이 나타났다 사라지면서 vh 가 바뀔 수 있어 dvh·svh 를 함께 씁니다.