- 프로젝트의 기준 글꼴 크기(보통 16px)를 입력합니다.
- 변환할 값과 단위를 입력하면 다른 단위 값이 즉시 계산됩니다.
- 원하는 값 칸을 클릭하면 그 값이 클립보드에 복사됩니다.
CSS 길이 단위는 크게 절대 단위(px·pt)와 상대 단위(rem·em·%)로 나뉩니다. 절대 단위는 항상 같은 크기로 고정되고, 상대 단위는 기준 값에 따라 함께 늘었다 줄었다 합니다.
- px: 화면 한 점 기준의 고정 크기. 직관적이지만 사용자 글꼴 설정에 반응하지 않습니다.
- rem: 루트(html) 글꼴 크기 기준. 한 곳만 바꿔도 전체가 비례해 커져 반응형·접근성에 유리합니다.
- em: 해당 요소 자신의 글꼴 크기 기준. 중첩되면 값이 누적되므로 버튼 내부 여백 같은 국소적 비례에 적합합니다.
세 단위를 언제 어떻게 골라 쓰는지는 px·rem·em 차이 가이드에 더 자세히 정리했습니다.
- 디자인 시안은 px, 구현은 rem: 디자인 도구는 px로 작업하는 경우가 많습니다. 그 값을 rem으로 바꿔 적용하면 사용자 글꼴 설정에 반응하는 접근성 좋은 UI가 됩니다.
- 62.5% 트릭: html에 font-size를 62.5%로 두면 1rem이 10px가 되어 계산이 쉬워집니다. 이때는 기준값을 10으로 바꿔 입력하세요.
- pt는 인쇄용: pt는 주로 인쇄 스타일시트에서 씁니다. 화면용에는 px·rem을, 인쇄용에는 pt를 쓰는 식으로 구분하면 좋습니다.
rem은 항상 루트(html)의 글꼴 크기를 기준으로 계산되고, em은 해당 요소(또는 부모)의 글꼴 크기를 기준으로 계산됩니다. 그래서 em은 중첩될수록 값이 누적될 수 있습니다. 이 도구는 기준 글꼴 크기 하나를 바탕으로 환산하므로, em은 그 기준을 부모 크기로 가정한 값입니다.
대부분의 브라우저는 기본 글꼴 크기를 16px로 정해 둡니다. 그래서 별도 설정이 없으면 1rem은 16px가 됩니다. 프로젝트에서 html에 다른 크기(예: 62.5%로 10px)를 지정했다면, 이 도구의 기준값도 그에 맞게 바꿔 입력하세요.
rem으로 크기를 지정하면 사용자가 브라우저 기본 글꼴 크기를 키웠을 때 글자와 여백이 함께 커져 접근성과 반응형에 유리합니다. px는 고정 크기라 사용자 설정을 따르지 않습니다. 그래서 글꼴·여백에는 rem을, 테두리처럼 고정이 필요한 곳에는 px를 쓰는 식으로 구분합니다.
이 도구의 %는 글꼴 크기 기준의 백분율로, 기준 글꼴 크기를 100%로 보고 환산합니다. 예를 들어 기준이 16px일 때 24px는 150%가 됩니다. 다만 실제 CSS에서 width나 height에 쓰는 %는 부모 요소의 크기를 기준으로 하므로 의미가 다릅니다. 이 변환표는 font-size 계열 단위 비교에 맞춰져 있습니다.
15px를 16 기준으로 나누면 0.9375rem처럼 소수가 길어집니다. 보통 소수 셋째 자리쯤에서 반올림해도 화면상 차이는 거의 없습니다. 떨어지는 깔끔한 값이 필요하면 기준 글꼴 크기를 10px(62.5% 트릭)로 바꾸면 px 값의 10분의 1이 그대로 rem이 되어 계산과 기억이 쉬워집니다.