CSS 단위 변환기 - px to rem, em, vw, vh & % 온라인
CSS 단위(px, rem, em, %, vw, vh) 간 변환. 기본 글꼴 크기와 뷰포트 크기를 설정할 수 있는 무료 온라인 CSS 단위 변환기.
자주 묻는 질문
CSS 단위 변환기란 무엇인가요?
CSS 단위 변환기는 픽셀(px), 루트 em(rem), em, 퍼센트(%), 뷰포트 너비(vw), 뷰포트 높이(vh) 등 다양한 CSS 길이 단위 간에 값을 변환하는 도구입니다. 이러한 단위들은 절대 단위와 상대 단위 등 서로 다른 측정 체계를 나타내므로, 변환기를 사용하면 수동 계산 없이 빠르게 동등한 값을 찾을 수 있습니다.
이 CSS 단위 변환기는 어떻게 사용하나요?
입력 필드에 숫자 값을 입력하고 소스 단위(예: px)를 선택하면, 다른 모든 단위(rem, em, %, vw, vh)의 동등한 값이 즉시 표시됩니다. 설정 패널에서 기본 글꼴 크기와 뷰포트 크기를 프로젝트 설정에 맞게 조정할 수 있습니다. 출력 옆의 복사 버튼을 클릭하면 CSS에 바로 사용할 수 있는 값이 클립보드에 복사됩니다.
rem과 em의 차이점은 무엇인가요?
rem과 em 모두 글꼴 크기를 기반으로 하는 상대적 CSS 단위이지만, 참조하는 요소가 다릅니다. rem은 항상 루트 요소(<html>)의 글꼴 크기에 상대적이며, 대부분의 브라우저에서 기본값은 16px입니다. em은 해당 요소의 부모 글꼴 크기에 상대적입니다. 따라서 rem은 페이지 전체에서 일관된 크기를 제공하고, em은 요소가 중첩될 때 복합적으로 적용됩니다.
왜 px 대신 rem을 사용해야 하나요?
px 대신 rem을 사용하면 접근성과 반응성이 향상됩니다. 사용자가 브라우저의 기본 글꼴 크기를 변경하면(가독성이나 접근성을 위해), rem 기반 레이아웃은 비례적으로 조정되지만 px 기반 레이아웃은 고정된 상태로 유지됩니다. 이는 시각 장애가 있는 사용자에게 더 접근성 높은 사이트를 만들고, 다양한 기기와 사용자 설정에 더 잘 적응하게 합니다.
기본 글꼴 크기는 변환에 어떤 영향을 미치나요?
기본 글꼴 크기(대부분의 브라우저에서 기본값: 16px)는 px와 rem/em 사이의 관계를 결정합니다. 예를 들어, 16px 기준에서: 1rem = 16px, 0.875rem = 14px, 1.5rem = 24px입니다. 프로젝트에서 다른 루트 글꼴 크기를 설정한 경우(예: html { font-size: 14px; }), 정확한 변환을 위해 이 도구의 기본 글꼴 크기 설정을 업데이트해야 합니다.
뷰포트 단위(vw와 vh)란 무엇인가요?
뷰포트 단위는 브라우저 창 크기에 상대적입니다. 1vw는 뷰포트 너비의 1%이고, 1vh는 뷰포트 높이의 1%입니다. 예를 들어, 1920px 너비의 화면에서 50vw는 960px입니다. 반응형 전체 너비/높이 레이아웃, 히어로 섹션, 유동적 타이포그래피에 주로 사용됩니다.
CSS에서 퍼센트(%) 단위는 어떻게 작동하나요?
CSS에서 퍼센트 단위는 부모 요소의 해당 치수에 상대적입니다. 너비 관련 속성의 경우 %는 부모의 너비에 상대적입니다. font-size의 경우 %는 부모의 글꼴 크기에 상대적입니다. 이 도구는 설정된 부모 요소 너비를 기준으로 %를 변환하며, 레이아웃 컨텍스트에 맞게 설정에서 조정할 수 있습니다.
이 도구를 사용할 때 데이터가 안전한가요?
네. 이 CSS 단위 변환기는 클라이언트 사이드 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 입력 값이나 변환 결과가 서버로 전송되지 않습니다. 데이터는 항상 사용자의 기기에 유지됩니다.
코드 예제
// CSS Unit Conversion Functions
function toPx(value, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return value;
case 'rem': return value * baseFontSize;
case 'em': return value * parentFontSize;
case '%': return (value / 100) * parentWidth;
case 'vw': return (value / 100) * viewportWidth;
case 'vh': return (value / 100) * viewportHeight;
}
}
function fromPx(px, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return px;
case 'rem': return px / baseFontSize;
case 'em': return px / parentFontSize;
case '%': return (px / parentWidth) * 100;
case 'vw': return (px / viewportWidth) * 100;
case 'vh': return (px / viewportHeight) * 100;
}
}
function convert(value, from, to, ctx) {
return fromPx(toPx(value, from, ctx), to, ctx);
}
// Usage
const ctx = { baseFontSize: 16, viewportWidth: 1440 };
console.log(convert(24, 'px', 'rem', ctx)); // 1.5
console.log(convert(2, 'rem', 'px', ctx)); // 32
console.log(convert(50, 'vw', 'px', ctx)); // 720