이렇게 사용하세요
변환할 숫자와 단위를 고르면 일곱 가지 단위로 바꾼 값이 바로 나오고, 각 줄의 복사 버튼으로 1.5rem처럼 단위까지 붙은 값을 가져갈 수 있어요. 디자인 시안이 1440px 화면 기준이면 화면 너비에 1440을 넣고, 프로젝트의 html 글자 크기를 62.5%(10px)로 바꿨다면 html font-size를 10으로 고치세요. 아래 변환표도 설정에 맞춰 함께 바뀌어요.
단위별 계산 기준
- rem 문서 최상위(html) 글자 크기의 배수예요. 브라우저 기본값은 16px이라 1rem = 16px이에요.
- em 그 요소의 부모 글자 크기의 배수예요. 중첩될수록 곱해지니 주의하세요.
- vw / vh 화면 너비·높이의 1%예요. 1440px 화면에서 1vw = 14.4px이에요.
- pt 인쇄 단위로 1pt = 1/72인치, CSS에서는 1인치를 96px로 보니 1pt = 1.333px이에요.
- % 여기서는 font-size 기준으로 부모 글자 크기의 백분율로 계산해요. width의 %는 부모 너비 기준이라 결과가 달라요.
자주 묻는 질문
rem과 em 중 무엇을 써야 하나요?
글자 크기와 여백은 대부분 rem이 예측하기 쉬워요. 버튼 안 아이콘처럼 주변 글자 크기에 비례해야 하는 요소에는 em이 잘 맞아요.
사용자가 브라우저 글자 크기를 키우면요?
rem과 em은 함께 커져서 접근성에 유리해요. px로 고정한 글자는 확대 설정을 따르지 않을 수 있어요.
소수점은 몇 자리까지 보여 주나요?
소수 넷째 자리에서 반올림해요. 브라우저도 결국 화면 픽셀에 맞춰 반올림하니 실무에서는 충분한 정밀도예요.