CSS 단위 변환기

px, rem, em, pt, %, vw, vh 간에 CSS 단위를 변환합니다. 사용자 정의 기본 글꼴 크기와 뷰포트 설정으로 반응형 단위를 계산합니다.

값

변환 전 단위

변환 후 단위

변환 설정

기본 글꼴 크기 (px)

rem/em 계산을 위한 기본 글꼴 크기

뷰포트 너비 (px)

vw 계산을 위한 뷰포트 너비

뷰포트 높이 (px)

vh 계산을 위한 뷰포트 높이

px에서 rem로 변환 표

PX	REM	복사
8px	0.5rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
48px	3rem
64px	4rem

CSS 단위 변환기 사용 방법

입력 필드에 숫자 값을 입력하세요
변환 전 단위를 선택하세요
변환 후 단위를 선택하세요
필요한 경우 기본 글꼴 크기와 뷰포트 설정을 조정하세요
변환 버튼을 클릭하여 결과를 확인하세요

지원되는 CSS 단위

px (픽셀) - 절대 단위, 대부분의 화면에서 1px = 1/96인치
rem (루트 Em) - 루트 요소의 글꼴 크기 기준, 일반적으로 16px
em (Em) - 부모 요소의 글꼴 크기 기준
pt (포인트) - 절대 단위, 인쇄에서 주로 사용 (1pt = 1/72인치)
% (퍼센트) - 부모 요소의 크기 기준
vw (뷰포트 너비) - 1vw는 뷰포트 너비의 1%와 같습니다
vh (뷰포트 높이) - 1vh는 뷰포트 높이의 1%와 같습니다

일반적인 CSS 변환

16px를 1rem으로 - 표준 기본 글꼴 크기 변환
1px를 0.75pt로 - 인쇄용 픽셀에서 포인트로 변환
100vw는 뷰포트 너비 - 전체 뷰포트 너비
62.5% 트릭 - html 글꼴 크기를 62.5%로 설정하여 1rem = 10px로 계산 쉽게

상대 단위를 사용하는 이유

접근성 - 사용자가 브라우저 설정에서 텍스트 크기를 조정하면 디자인이 적응합니다
반응형 디자인 - 레이아웃이 다양한 화면 크기에 자연스럽게 확장됩니다
유지보수성 - 한 곳에서 기본 크기를 변경하면 전체 디자인이 확장됩니다
현대적 표준 - 포용적 디자인을 위한 웹 접근성 지침(WCAG) 준수
브라우저에서 완전히 작동하며 서버로 데이터가 전송되지 않습니다

변환 공식

rem = px / 기본-글꼴-크기

예: 24px / 16px (기본) = 1.5rem