CSS 단위 변환기 (px ↔ rem / em / vh / vw)

웹페이지를 만들다 보면 px, rem, em, vw, vh 같은 CSS 단위를 자주 바꿔 계산해야 합니다. 아래 CSS 단위 변환기는 기준 font-size와 viewport 크기를 입력하면 px를 rem, em, vw, vh로 바꾸거나 반대로 다시 px로 환산할 수 있도록 만든 도구입니다.

디자인 시안의 px 값을 반응형 CSS에 맞게 바꾸거나, rem 기반 스타일 가이드를 만들 때 빠르게 확인할 수 있습니다. 기준값을 바꾸면 결과가 즉시 다시 계산되므로 프로젝트의 기본 폰트 크기나 화면 기준에 맞춰 사용할 수 있습니다.

사용 방법

1. 기준 font-size를 입력합니다. 일반적으로 브라우저 기본값은 16px입니다.
2. vw, vh 변환이 필요하면 기준 viewport 너비와 높이를 입력합니다.
3. px 또는 변환할 단위 값을 입력하면 반대쪽 값이 자동으로 계산됩니다.
4. 소수점 자리수를 선택해 결과 표시 형식을 조절할 수 있습니다.
5. 필요한 값은 결과 복사 버튼으로 한 번에 복사할 수 있습니다.

CSS 단위 차이

px는 고정 픽셀 단위라 계산이 직관적입니다. rem은 루트 요소의 font-size를 기준으로 하며, 전체 웹사이트의 글자 크기와 여백 체계를 관리할 때 많이 사용됩니다. em은 현재 요소 또는 부모 요소의 font-size 영향을 받기 때문에 컴포넌트 내부 비율 조정에 유용합니다.

vw는 viewport 너비의 1%, vh는 viewport 높이의 1%를 의미합니다. 화면 크기에 따라 자연스럽게 변하는 영역, 섹션 높이, 반응형 타이포그래피를 만들 때 자주 사용됩니다.

실무에서 자주 쓰는 변환 예시

기본 font-size가 16px이라면 24px은 1.5rem, 32px은 2rem으로 변환됩니다. 이처럼 rem 단위를 사용하면 전체 글자 크기 기준이 바뀌어도 비율을 유지하기 쉬워집니다.

예를 들어 1920px 기준 화면에서 320px 너비는 약 16.67vw입니다. 반대로 100vh는 현재 viewport 높이 전체를 의미하므로 첫 화면을 꽉 채우는 섹션을 만들 때 자주 사용합니다.

단, vw와 vh는 화면 크기에 직접 영향을 받기 때문에 모바일에서 너무 작거나 커지지 않도록 min, max, clamp 같은 CSS 함수와 함께 사용하는 것이 좋습니다. rem과 em도 기준 font-size에 따라 결과가 달라지므로 프로젝트의 기본 CSS 설정을 먼저 확인한 뒤 변환해 주세요.