CSS 단위 계산기
CSS 단위 변환기
px 값 하나를 vw·rem·em·%·pt로 한 번에 바꿉니다. 기준 너비와 폰트 설정은 자동으로 저장됩니다.
값 하나를 모든 단위로
어느 칸에 입력해도 나머지 단위가 바로 계산됩니다.
자주 쓰는 값
현재 설정 기준으로 계산한 표입니다. 값을 클릭하면 복사됩니다.
| px | vw | rem | em | % | pt |
|---|
단위별 변환 공식
| 단위 | px → 단위 | 단위 → px | 기준 |
|---|---|---|---|
| vw | px ÷ 기준 너비 × 100 | vw × 기준 너비 ÷ 100 | 뷰포트(시안) 너비 |
| rem | px ÷ 루트 폰트 | rem × 루트 폰트 | html의 font-size (기본 16px) |
| em | px ÷ 부모 폰트 | em × 부모 폰트 | 부모 요소의 font-size |
| % | px ÷ 부모 너비 × 100 | % × 부모 너비 ÷ 100 | 부모 요소의 너비 |
| pt | px × 0.75 | pt ÷ 0.75 | 고정 비율 (96px = 72pt) |
예를 들어 1920px 시안·루트 16px 기준으로 24px는 1.25vw = 1.5rem = 1.5em = 18pt입니다.
어떤 단위를 언제 쓰나요?
- px: 보더, 그림자, 아이콘처럼 화면 크기와 관계없이 선명해야 하는 값. 1px 보더는 변환하지 말고 그대로 두세요.
- rem: 글자 크기, 여백, 컴포넌트 크기의 기본 단위. 사용자의 브라우저 글꼴 설정과 확대가 그대로 반영되어 접근성에 유리합니다.
- em: 아이콘 크기나 버튼 패딩처럼 글자 크기에 비례해야 하는 값. 중첩되면 누적되므로 전역 크기에는 쓰지 않습니다.
- vw: 히어로 섹션, 큰 제목, 섹션 여백처럼 화면 너비에 비례해야 하는 값. 글자에는 clamp()로 최소·최대를 함께 지정하세요.
- %: 부모 요소 기준의 유동 레이아웃 폭, 이미지 max-width.
- pt: 인쇄용 스타일시트와 포토샵·일러스트레이터 문서의 값을 옮길 때.
단위별 전용 도구
CSS 코드 전체를 한 번에 바꾸는 일괄 변환과 SCSS 함수는 각 단위의 전용 도구에 있습니다.
자주 묻는 질문
px를 vw로 바꾸는 공식은 무엇인가요?
vw = px ÷ 기준 너비 × 100입니다. 1920px 시안의 24px는 24 ÷ 1920 × 100 = 1.25vw입니다. 기준 너비에는 디자인 시안의 아트보드 너비를 넣습니다.
px를 rem으로 바꾸는 공식은 무엇인가요?
rem = px ÷ 루트 폰트 크기입니다. 브라우저 기본값인 16px 기준으로 24px는 1.5rem입니다. html에 font-size: 62.5%를 쓰는 프로젝트라면 루트 폰트를 10으로 바꾸세요.
em과 rem은 무엇이 다른가요?
rem은 html 요소의 폰트 크기, em은 부모 요소의 폰트 크기를 기준으로 합니다. 부모 폰트가 20px이면 24px는 1.2em이지만, 루트가 16px이면 1.5rem입니다. 중첩된 요소에서 em은 누적되므로 전역 크기에는 rem을 쓰는 편이 안전합니다.
pt와 px는 어떻게 변환하나요?
CSS에서 1in = 96px = 72pt로 정의되어 1px = 0.75pt, 1pt = 1.333px입니다. 포토샵·일러스트레이터 문서나 인쇄용 CSS의 pt 값을 웹 px로 옮길 때 이 비율을 씁니다.
%는 무엇을 기준으로 계산하나요?
width·padding·margin의 %는 부모 요소의 너비 기준입니다. 이 변환기의 부모 너비에 부모 요소 너비를 넣으면 됩니다. font-size의 %는 부모 폰트 크기 기준이므로 em 값과 같습니다(1em = 100%).