CSS 단위 변환기

값을 입력하고 변환할 단위를 선택하세요. 'em', 'rem', 'vw', 'vh', '%' 계산을 위해 고급 설정을 조정하세요.

CSS 단위 변환기

변환 전 단위

변환 후 단위

Common CSS Unit Conversions

단위 정의

px (Pixels): 픽셀; 디스플레이 장치에 상대적인 절대 단위입니다.

em: 부모 요소의 글꼴 크기에 상대적입니다.

rem: 루트(html) 요소의 글꼴 크기에 상대적입니다.

vw/vh: 뷰포트 너비의 1%입니다.

%: 같은 속성에 대한 부모 요소의 값에 상대적입니다(예: 글꼴 크기 변환을 위한 부모의 글꼴 크기).

pt (Points): 포인트; 절대 단위입니다(1pt = 1인치의 1/72).

in, cm, mm: 인치; 절대 단위입니다(1in = 96px)., 센티미터; 절대 단위입니다(1cm ≈ 37.8px)., 밀리미터; 절대 단위입니다(1mm = 센티미터의 1/10).

CSS 단위 변환기 사용 방법

1
값과 단위 입력
변환할 숫자를 입력한 뒤, px에서 rem 등으로 From 단위와 To 단위를 선택하세요.
2
고급 컨텍스트 설정
상대 단위의 경우 Advanced Settings를 열어 계산에 사용되는 루트 글꼴 크기, 부모 글꼴 크기, 뷰포트 너비와 높이를 설정하세요.
3
변환
Convert를 클릭해 등가값을 계산하거나, Swap으로 From과 To 단위를 서로 바꾸세요.

어떤 CSS 단위 간에 변환할 수 있나요?

px, em, rem, %, vw, vh, pt, in, cm, mm 사이에서 변환하므로, 절대 단위와 현대 CSS에서 쓰이는 상대적이고 반응형인 단위를 자유롭게 오갈 수 있습니다.

왜 em, rem, 뷰포트 변환에는 추가 설정이 필요한가요?

이들 단위는 상대적이어서 픽셀 값이 컨텍스트에 따라 달라집니다. 고급 설정에서 rem의 루트 글꼴 크기, em과 %의 부모 글꼴 크기, vw와 vh의 뷰포트 너비와 높이를 지정하면 결과가 실제 레이아웃과 일치하게 됩니다.

기본 글꼴 크기는 무엇으로 가정하나요?

기본적으로 em과 rem 변환에 일반적인 브라우저 루트 글꼴 크기인 16px를 사용합니다. 디자인이 다른 기준을 쓴다면 Advanced Settings에서 루트와 부모 글꼴 크기를 재정의할 수 있습니다.

절대 단위 변환은 얼마나 정확한가요?

절대 단위는 CSS 사양을 따라 1in이 96px, 1pt가 1/72인치, 1cm가 약 37.8px이므로, px, pt, in, cm, mm 간 변환은 정확합니다.

이 변환기는 무료이고 로컬에서 실행되나요?

네. 가입 없이 무료이고 모바일에서도 작동하며, 모든 계산을 브라우저 안에서 수행하므로 데이터가 서버로 전송되지 않습니다.