CSS 단위 변환기는 어떤 도구인가요

웹 화면을 만들다 보면 같은 크기를 px로도 쓰고 rem으로도 쓰고, 인쇄용 시안에서는 pt로 받게 됩니다. 이 도구는 그 네 가지 단위를 한 화면에 나란히 놓고, 어느 칸에 숫자를 넣든 나머지 세 칸이 곧바로 다시 계산되도록 만든 변환기예요. 16을 px 칸에 넣으면 rem 1, em 1, pt 12가 동시에 채워집니다.

변환의 기준이 되는 값은 맨 위의 기준 폰트크기(root)입니다. rem과 em은 이 값을 1로 놓고 나눈 결과이고, 기본값 16px은 대부분의 브라우저가 쓰는 기본 글자 크기예요. 디자인 시스템에서 루트 글자를 14px이나 18px로 잡았다면 이 칸부터 바꿔 두고 쓰면 됩니다. pt는 화면 96dpi를 기준으로 1px = 0.75pt로 환산하고, 결과는 소수점 다섯 자리에서 반올림해 보여줍니다.

디자인 시안에서 받은 px 값을 rem 기반 스타일시트에 옮겨 적을 때, 반대로 코드에 박힌 rem이 실제 몇 픽셀인지 확인하고 싶을 때, 인쇄물 시안의 pt를 화면 크기로 가늠할 때 쓰기 좋습니다. 계산은 전부 이 페이지 안의 자바스크립트가 처리하기 때문에 값을 넣어도 어디로도 전송되지 않아요.

사용 방법

1. 맨 위 기준 폰트크기 칸을 확인합니다. 특별한 이유가 없으면 16px 그대로 두세요.
2. 알고 있는 값을 px·rem·em·pt 중 해당하는 칸에 입력합니다.
3. 나머지 세 칸이 즉시 바뀝니다. 다시 계산 버튼을 누를 필요는 없어요.
4. 칸 오른쪽의 복사 아이콘을 누르면 단위까지 붙은 문자열(예: 1.5rem)이 클립보드에 담깁니다.