CSS 단위 변환기

자주 쓰는 변환 예시

기본 설정(루트 글꼴 크기 16px, 뷰포트 1920px) 기준:

• 16px = 1rem = 1em = 0.833333vw
• 1rem = 16px
• 100vw = 1920px = 120rem

각 단위 사용 시나리오

• px — 화면의 물리 픽셀이 아니라 CSS 픽셀입니다. 2배 화면에서는 CSS 픽셀 하나가 가로세로 2×2개의 물리 픽셀을 쓰고, 페이지를 확대하면 함께 커집니다. 브라우저의 글꼴 크기 설정은 따르지 않습니다. 테두리, 그림자 등 세부 요소에 적합합니다.
• rem — 루트 글꼴 크기를 px로 고정하지 않았다면 사용자 브라우저의 글꼴 크기 설정에 따라 함께 바뀝니다. 접근성 중심 디자인에서 글꼴 크기와 간격에 권장.
• em — 요소 자신의 글꼴 크기가 기준입니다(font-size에 쓸 때는 부모 요소 기준). 컴포넌트 안에서 크기를 상대적으로 정할 때 유용합니다.
• vw — 뷰포트 너비를 기준으로 합니다. 유동적 타이포그래피와 전체 너비 레이아웃에 적합합니다.

변환 공식

루트 글꼴 크기 16px, 뷰포트 너비 1920px(기본값)일 때:

rem = px ÷ root font size          24px ÷ 16 = 1.5rem
px  = rem × root font size         1.5rem × 16 = 24px
vw  = px ÷ viewport width × 100    24px ÷ 1920 × 100 = 1.25vw
px  = vw × viewport width ÷ 100    1.25vw × 1920 ÷ 100 = 24px

예시: KRDS의 루트 10px 기준으로 바꾸기

대한민국 정부 디자인 시스템 KRDS의 npm 패키지 krds-uiux 1.1.0은 common.css에서 --krds-font-size-base: 62.5%;를 정의하고 html의 글꼴 크기로 씁니다. 브라우저 기본 글꼴 크기가 16px일 때 루트는 10px로 계산되므로, 토큰 파일 krds_tokens.css의 본문 크기 --krds-pc-font-size-body-medium: 1.7rem;은 17px에 해당합니다.

디자인 시안의 17px 값을 KRDS 방식의 rem으로 옮기려면 ‘설정’에서 루트 글꼴 크기를 10으로 바꾸고 단위 px로 17을 입력합니다.

결과는 1.7rem으로 토큰 값과 같습니다. 같은 17px 값을 루트 16px 기준으로 바꾸면 1.0625rem이 되므로, 어느 프로젝트에 붙일 값인지에 따라 루트 크기를 먼저 맞춰야 합니다.

간격 토큰 --krds-number-10: 2.4rem;도 확인해 보겠습니다. 루트 10, 뷰포트 너비 360으로 두고 단위 rem으로 2.4를 입력하면 다음과 같습니다.

24px, 그리고 너비 360px 휴대폰 화면에서는 6.66667vw입니다.

em이 예상과 다르게 나오는 이유

이 도구는 em을 rem처럼 루트 글꼴 크기 기준으로 변환합니다. 실제 페이지에서 font-size에 쓴 em은 부모 요소의 글꼴 크기가 기준이라서, 중첩하면 곱해져 커집니다(MDN).

html  { font-size: 16px; }
.card { font-size: 1.25em; }   /* 20px */
.card .title { font-size: 1.25em; }   /* 25px: 1.25 × 20px */
.card .title small { font-size: 1.25em; }   /* 31.25px */

rem으로 쓰면 모든 단계가 20px로 유지됩니다. 버튼 안쪽 여백처럼 자기 글자 크기에 맞춰야 하는 값은 em, 글꼴 크기와 레이아웃 간격은 rem을 쓰세요.

제한 사항

• em을 rem으로 변환합니다. 요소의 글꼴 크기가 루트와 같을 때만 정확합니다.
• 단위는 네 가지뿐입니다: px, rem, em, vw. vh, %, pt, ch는 변환하지 않습니다.
• vw는 입력한 너비로 계산합니다. 기본값 1920px는 데스크톱 너비이므로, 휴대폰이라면 360이나 390처럼 대상 너비를 넣으세요.
• 결과는 유효숫자 6자리로 반올림합니다(예: 1920px에서 16px는 0.833333vw).
• vw에는 스크롤바가 포함됩니다. 데스크톱 브라우저에 일반 스크롤바가 보이면 100vw는 세로 스크롤바까지 포함한 창 너비라서 콘텐츠 영역보다 넓고, 가로 스크롤바가 생길 수 있습니다.
• 값 칸에는 숫자만 넣습니다. 16px처럼 단위를 붙여 입력하면 읽지 않으니 단위는 메뉴에서 고르세요. 루트 글꼴 크기나 뷰포트 너비를 비우거나 0을 넣으면 각각 16px, 1920px로 계산합니다. 음수를 넣으면 상태 줄에 오류가 표시되고 결과가 비워집니다.