📐 CSS 단위 변환기

px, rem, em, vw, vh 단위를 실시간으로 변환합니다.

기준 설정

Root font-size (브라우저 기본)

부모 font-size (em 기준)

Viewport 너비 (vw 기준, px)

단위 변환 (값 입력 시 나머지 자동 계산)

픽셀

rem

root em

parent em

뷰포트 너비 %

포인트 (1pt=1.333px)

일반 크기 참고표 (root: 16px 기준) — 클릭해서 복사

설명	px	rem	em	pt

📖 사용방법 & CSS 단위 설명

px (픽셀): 절대 단위. 화면 해상도와 무관하게 고정된 크기. 버튼, 테두리 등에 주로 사용.
rem (root em): HTML 루트 요소의 font-size 기준. 기본값 16px일 때 1rem=16px. 반응형 디자인에 권장.
em: 부모 요소의 font-size 기준. 중첩 시 주의 필요. 컴포넌트 내부 간격에 유용.
vw/vh: 뷰포트 너비/높이의 %. 100vw=화면 전체 너비. 반응형 레이아웃에 활용.
변환하려는 값의 입력란에 숫자를 입력하면 나머지 단위가 자동으로 계산됩니다. 기준 설정을 바꾸면 즉시 반영됩니다.

📐 CSS 단위 변환기 실제 사용 예시

입력: 기준 16px에서 24px
예상 결과: 1.5rem으로 변환
확인 사항: rem 기준값과 viewport 단위는 환경에 따라 달라짐

처리 방식

입력한 코드와 문자열은 현재 브라우저에서 변환하며 FreeTools 서버로 전송하지 않습니다. 민감한 원본은 별도로 보관하고, 결과가 중요한 판단이나 제출에 쓰이는 경우 원본 및 공식 기준과 한 번 더 대조하세요.

📐 CSS 단위 변환기 사용 가이드

CSS 단위를 변환합니다. px↔rem↔em↔vw↔vh 실시간 변환. 기준 font-size와 viewport 크기 설정 가능. 개발자를 위한 무료 도구. 프리툴즈(freetools.kr)에서 무료로 사용하세요. 입력한 내용과 선택한 파일은 페이지에 별도 안내가 없는 한 현재 브라우저에서 처리되며, 작업을 시작하기 전에 원본을 별도로 보관하는 것이 안전합니다.

권장 사용 순서

입력 형식과 단위를 확인하고 작은 예제로 먼저 시험합니다.
운영 데이터 대신 짧은 샘플을 먼저 입력해 형식과 옵션을 확인한 뒤 실제 작업에 적용하세요.
결과를 내려받거나 복사한 뒤 원본과 비교해 필요한 부분이 모두 반영됐는지 확인합니다.

결과 확인 방법

변환 전후의 의미가 같은지, 문자 인코딩·이스케이프·줄바꿈·대소문자가 의도대로 유지되는지 확인하세요. 브라우저를 새로고침하거나 다른 입력으로 다시 실행해도 같은 기준으로 결과가 나오는지 확인하면 실수를 줄일 수 있습니다.

처리 범위와 제한사항

토큰, 비밀번호, 개인키, 고객정보 같은 비밀값은 입력하지 마세요. 디코딩이나 형식 변환은 서명 검증 또는 보안 검사를 대신하지 않습니다. 오류가 계속되면 입력 크기와 형식을 줄여 다시 시도하고, 중요한 업무 자료는 결과를 사람이 최종 검토하세요.

기능 및 설명 검토: FreeTools 운영팀 · 2026-07-31