CSS 단위 변환기

CSS 단위 변환기 소개

px, rem, em, %, pt, vw, vh 가운데 하나로 값을 넣으면 고른 단위로 환산합니다. 환산 기준은 직접 정합니다. 루트(html) 글꼴 크기는 rem의 기준, 부모 요소 글꼴 크기는 em의 기준, 컨테이너 크기는 %의 기준, 뷰포트 너비·높이는 vw·vh의 기준입니다. 기본값은 각각 16px, 16px, 100px이고 뷰포트는 지금 보고 있는 창 크기로 채워집니다. pt는 1pt = 4/3px로 고정입니다. 단위를 빼고 숫자만 넣으면 px로 봅니다.

계산은 곱셈 한 번이지만, 기준값을 무엇으로 잡느냐에 따라 결과가 완전히 달라집니다. 특히 %는 속성마다 기준이 다르고, px는 이름과 달리 화면의 물리 픽셀이 아닙니다.

CSS의 px는 화면 픽셀이 아니다

CSS Values and Units 규격은 px를 「참조 픽셀」로 정의합니다. 96dpi 기기를 팔 길이만큼 떨어져서 볼 때 픽셀 하나가 차지하는 시야각이고, 팔 길이를 28인치로 잡으면 약 0.0213도입니다. 즉 CSS px는 길이라기보다 각도에 가까운 단위입니다. 그래서 멀리서 보는 TV에서는 1px가 물리적으로 더 크고, 손에 드는 휴대폰에서는 더 작게 그려지는 것이 규격의 의도에 맞습니다.

실제로 브라우저는 기기 화소 비율(devicePixelRatio)로 이를 맞춥니다. 화소 비율이 3인 휴대폰에서는 CSS 1px가 물리 화소 3×3개로 그려집니다. 규격은 1in = 96px, 1in = 2.54cm로 고정해 두었기 때문에, CSS에서 1cm라고 써도 화면에 자를 대 보면 대개 정확히 1cm가 아닙니다.

rem과 em: 무엇을 기준으로 곱하나

rem은 루트 요소의 font-size를, em은 그 요소 자신의 font-size를 기준으로 합니다(font-size 속성 안에서 쓴 em만 부모 글꼴 크기가 기준입니다). 이 도구의 「부모 글꼴 크기」 칸은 흔한 경우인 font-size에서의 em을 계산하는 것입니다.

em은 중첩되면 곱해집니다. font-size: 1.2em인 목록 안에 같은 목록이 세 번 들어가면 16 × 1.2 × 1.2 × 1.2 ≈ 27.6px가 됩니다. rem은 항상 루트만 보므로 이런 누적이 없습니다. 반대로 버튼의 padding을 em으로 주면 버튼 글꼴이 커질 때 여백도 같이 커지는 장점이 있습니다.

rem을 쓰는 가장 큰 이유는 접근성입니다. 사용자가 브라우저 설정에서 기본 글꼴 크기를 16px에서 20px로 키우면, rem으로 잡은 글자는 따라 커지고 px로 고정한 글자는 그대로입니다. html { font-size: 62.5% }로 1rem을 10px로 만드는 방식도 있는데, 이것도 사용자의 기본 크기를 기준으로 비례하므로 %로 쓰는 한 이 설정을 무시하지는 않습니다.

%의 기준은 속성마다 다르다

이 도구는 %를 「컨테이너 크기」 한 값의 백분율로 계산합니다. 실제 CSS에서는 속성마다 기준이 다르므로 컨테이너 크기 칸에 무엇을 넣을지 판단해야 합니다.

• width, left/right: 포함 블록의 너비
• height: 포함 블록의 높이(높이가 정해져 있지 않으면 auto처럼 동작)
• padding, margin: 위아래 값도 포함 블록의 「너비」 기준
• font-size: 부모 글꼴 크기 기준(이때 %는 em × 100과 같음)
• line-height: 요소 자신의 글꼴 크기 기준
• transform: translate(): 요소 자신의 크기 기준

pt와 인쇄 단위

규격에서 1pt = 1/72in, 1pc = 1/6in이고 1in = 96px이므로 1pt = 4/3px, 12pt = 16px입니다. 워드프로세서의 12pt 본문이 웹의 기본 16px과 같은 크기인 이유입니다. 이 도구에서 단위를 pt로 고르거나 12pt처럼 입력하면 바로 px·rem으로 바뀝니다.

예시

사용 방법

1. 루트 글꼴, 부모 글꼴, 컨테이너 크기, 뷰포트 너비·높이를 실제 값으로 맞춥니다.
2. 값을 단위와 함께 넣습니다(단위가 없으면 px).
3. 결과 단위를 골라 확인하고 복사합니다. 소수점 넷째 자리까지 표시됩니다.

자주 묻는 질문