CSS 단위 변환기

CSS 단위 변환 가이드

px 숫자 하나도 기준을 알아야 같은 크기로 읽힙니다

CSS 단위 변환기는 입력한 값을 먼저 px로 환산한 뒤 rem, em, %, vw, vh, vmin, vmax, 절대 단위까지 같은 화면에서 비교하는 도구입니다. 글자 크기뿐 아니라 line-height, border-width, radius, padding, gap, width, box-shadow처럼 실제 CSS 속성에 붙여 넣을 문장까지 함께 보면서 기준값이 맞는지 확인할 수 있습니다.

먼저 기준 폰트 크기와 현재 단위를 맞춥니다

위 도구는 계산 버튼을 기다리는 방식이 아닙니다. 기준 폰트 크기, 변환할 값, 현재 단위, 뷰포트 크기, CSS 적용 속성을 바꾸면 결과 카드와 속성별 템플릿, 미리보기가 바로 갱신됩니다.

기준 폰트 크기를 프로젝트의 루트 글자 크기에 맞춥니다. 기본 16px은 많은 브라우저의 기본값이지만, 사이트가 10px 또는 14px 기준으로 설계됐다면 이 값부터 바꿉니다.
변환할 값과 현재 단위를 넣습니다. px뿐 아니라 rem, em, %, vw, vh, vmin, vmax, in, cm, mm, pt, pc에서 출발할 수 있습니다.
뷰포트 너비와 높이를 실제 확인 화면에 맞춥니다. vw, vh, vmin, vmax 결과는 이 두 값에 따라 달라집니다.
CSS 적용 속성을 고른 뒤 결과 창과 속성별 세부 템플릿을 확인합니다. 필요한 문장은 CSS 복사 또는 카드별 복사 버튼으로 옮길 수 있습니다.

rem, em, %, vw, vh는 서로 다른 기준을 봅니다

같은 24px이라도 어떤 단위로 쓰느냐에 따라 나중에 커지는 조건이 달라집니다. 글자 크기와 여백을 접근성 설정에 맞춰 키우고 싶다면 rem이 어울리고, 컴포넌트 내부 비율을 따라가야 한다면 em이나 %의 기준을 더 조심해서 봐야 합니다.

px

CSS에서 길이를 직접 지정하는 기준값입니다. 도구는 모든 입력을 일단 px로 환산한 뒤 다른 단위로 다시 나눕니다.

rem · em · %

입력한 기준 폰트 크기를 기준으로 계산합니다. rem은 루트 기준, em은 요소 주변 글자 크기, %는 속성마다 상대 기준이 달라질 수 있습니다.

vw · vh · vmin · vmax

뷰포트 너비와 높이를 기준으로 합니다. 모바일 주소창이나 화면 크기 차이 때문에 실제 레이아웃에서는 다시 확인해야 합니다.

절대 단위와 근사 단위

in, cm, mm, pt, pc는 CSS 절대 길이 관계를 따릅니다. ch≈와 ex≈는 폰트마다 달라질 수 있어 빠른 비교용 근사값으로 봅니다.

도구는 px로 환산한 뒤 다시 각 단위로 나눕니다

입력값이 어떤 단위든 먼저 px 값으로 바꾼 다음, 기준 폰트 크기나 뷰포트 크기, CSS 절대 길이 관계를 이용해 다른 결과를 계산합니다. 그래서 기준 폰트 크기와 뷰포트 값이 틀리면 rem, %, vw, vh 결과도 함께 틀어집니다.

rem · empx ÷ 기준 폰트 크기

%px ÷ 기준 폰트 크기 × 100

vw · vhpx ÷ 뷰포트 크기 × 100

절대 길이1in = 96px

W3C CSS Values and UnitsCSS 길이 단위와 절대 길이 관계를 원문으로 확인할 때 참고합니다.MDN <length> CSS typerem, em, viewport 단위, 절대 단위의 실제 사용 차이를 볼 때 참고합니다.

24px 예시는 font-size: 1.5rem으로 읽힙니다

기준 폰트 크기를 16px로 두고 변환할 값에 24px을 넣으면 결과 창은 24px, 1.5rem, 1.5em, 150%를 함께 보여 줍니다. 뷰포트가 1366×900이면 같은 값은 약 1.757vw, 2.6667vh로도 표시됩니다.

입력24px

기준1rem = 16px

상대 단위1.5rem · 150%

CSS 출력font-size: 1.5rem;

미리보기는 감을 잡는 용도입니다

도구의 미리보기는 글자와 박스가 너무 작거나 커지지 않도록 화면 안에서 보기 좋은 범위로 보여 줍니다. 실제 사이트에 붙여 넣은 뒤에는 적용되는 폰트, 부모 요소, 반응형 break point에서 다시 확인하세요.

복사한 값을 그대로 쓰기 전에 기준을 한 번 더 확인합니다

CSS 단위 변환은 숫자를 맞추는 작업이지만, 최종 화면은 부모 요소와 폰트, 뷰포트, 속성의 상대 기준을 같이 받습니다. 특히 em, %, vw, vh를 쓸 때는 한 값만 보고 전체 레이아웃을 판단하지 않는 편이 안전합니다.

em은 중첩 영향을 받을 수 있습니다. 카드 안의 버튼처럼 부모 글자 크기가 바뀌는 곳에서는 rem보다 예측이 어려울 수 있습니다.
%는 속성마다 기준이 다릅니다. font-size의 %와 width의 %는 같은 150%라도 참조하는 대상이 다를 수 있습니다.
vw와 vh는 모바일에서 체감이 달라집니다. 주소창과 브라우저 UI, 화면 방향에 따라 높이 기준이 바뀌어 보일 수 있습니다.
절대 단위는 화면의 실제 자와 같다고 보장하지 않습니다. CSS px 관계를 기준으로 환산되므로 인쇄물이나 물리 측정용 자료와는 따로 확인해야 합니다.

자주 묻는 질문

기준 폰트 크기 16px을 그대로 써도 되나요?

브라우저 기본값을 따르는 일반 페이지라면 16px이 무난합니다. 다만 프로젝트에서 html 폰트 크기를 10px이나 14px로 따로 정했다면 도구의 기준 폰트 크기도 같은 값으로 바꿔야 rem과 % 결과가 맞습니다.

rem과 em 결과가 같은데 둘 다 보는 이유는 무엇인가요?

이 도구는 입력한 기준 폰트 크기로 두 값을 나란히 계산합니다. 숫자는 같아 보여도 CSS에서 rem은 루트 폰트 크기, em은 현재 요소나 부모 요소의 글자 크기를 따라가므로 실제 컴포넌트 안에서는 다르게 작동할 수 있습니다.

vw와 vh 값은 화면 크기가 바뀌면 다시 봐야 하나요?

네. vw는 뷰포트 너비, vh는 뷰포트 높이를 기준으로 하므로 모바일과 데스크톱에서 값의 체감 크기가 달라집니다. 도구의 뷰포트 너비·높이를 실제 검토 화면에 맞춰 바꾼 뒤 결과를 읽는 편이 안전합니다.

ch≈와 ex≈에 근사 표시가 붙는 이유는 무엇인가요?

ch와 ex는 실제 폰트의 글리프 폭과 x-height 영향을 받습니다. 도구는 빠른 비교를 위해 기준 폰트 크기의 절반을 근사값으로 사용하므로, 최종 타이포그래피에서는 실제 폰트가 적용된 화면에서 한 번 더 확인해야 합니다.

CSS 단위 변환기