W
WEBIS 웹유틸
무료 웹 도구 모음
📐
도구

CSS 단위 변환기

px, rem, em, % 를 한 번에 비교해 spacing 과 typography 토큰을 더 빠르게 정리할 수 있습니다.

기준 설정

rem 기준, 부모 font-size, percent 기준을 같이 두고 계산합니다.

실무 기준

일반 본문은 16px, 보조 캡션은 14px, 모바일 버튼 높이는 44px 이상을 기본 기준으로 두면 정리가 편합니다.

변환 결과

각 단위를 한 줄씩 바로 복사할 수 있습니다.

미리보기 크기
텍스트 크기 예시
WEBIS publishing sample text
spacing 예시
기억해둘 포인트
  • rem 은 root 기준이라 전체 UI 스케일 조절에 유리합니다.
  • em 은 부모 글자 크기의 영향을 받으므로 컴포넌트 내부 비율 조절에 적합합니다.
  • % 는 부모 font-size 대비라 캡션/보조 텍스트 비율 조정에 자주 씁니다.

사용방법

CSS 단위 변환 사용 흐름

이 도구의 입력, 실행, 결과 확인 흐름을 기준으로 사용하면 더 안정적으로 작업할 수 있습니다.

01 코드 또는 데이터를 입력합니다

CSS 단위 변환에 점검할 코드, 설정값, 토큰, URL, 명령어를 붙여넣습니다.

02 검증·정렬·생성을 실행합니다

문법 오류, 옵션, 출력 포맷을 확인하면서 브라우저 안에서 바로 처리합니다.

03 결과를 업무 흐름에 반영합니다

복사 가능한 결과를 개발 문서, 터미널, 배포 체크리스트에 이어서 사용합니다.