사용법
- 프로젝트의 기준 글꼴 크기(보통 16px)를 입력합니다.
- 변환할 값과 단위를 입력하면 다른 단위 값이 즉시 계산됩니다.
- 원하는 값 칸을 클릭하면 그 값이 클립보드에 복사됩니다.
활용 팁
- 디자인 시안은 px, 구현은 rem: 디자인 도구는 px로 작업하는 경우가 많습니다. 그 값을 rem으로 바꿔 적용하면 사용자 글꼴 설정에 반응하는 접근성 좋은 UI가 됩니다.
- 62.5% 트릭: html에 font-size를 62.5%로 두면 1rem이 10px가 되어 계산이 쉬워집니다. 이때는 기준값을 10으로 바꿔 입력하세요.
- pt는 인쇄용: pt는 주로 인쇄 스타일시트에서 씁니다. 화면용에는 px·rem을, 인쇄용에는 pt를 쓰는 식으로 구분하면 좋습니다.
자주 묻는 질문
Q. rem과 em은 어떻게 다른가요?
rem은 항상 루트(html)의 글꼴 크기를 기준으로 계산되고, em은 해당 요소(또는 부모)의 글꼴 크기를 기준으로 계산됩니다. 그래서 em은 중첩될수록 값이 누적될 수 있습니다. 이 도구는 기준 글꼴 크기 하나를 바탕으로 환산하므로, em은 그 기준을 부모 크기로 가정한 값입니다.
Q. 기준 글꼴 크기(base)는 왜 16인가요?
대부분의 브라우저는 기본 글꼴 크기를 16px로 정해 둡니다. 그래서 별도 설정이 없으면 1rem은 16px가 됩니다. 프로젝트에서 html에 다른 크기(예: 62.5%로 10px)를 지정했다면, 이 도구의 기준값도 그에 맞게 바꿔 입력하세요.
Q. 왜 rem을 px 대신 쓰나요?
rem으로 크기를 지정하면 사용자가 브라우저 기본 글꼴 크기를 키웠을 때 글자와 여백이 함께 커져 접근성과 반응형에 유리합니다. px는 고정 크기라 사용자 설정을 따르지 않습니다. 그래서 글꼴·여백에는 rem을, 테두리처럼 고정이 필요한 곳에는 px를 쓰는 식으로 구분합니다.