CSS 단위 변환기
값을 한 번 입력하면 선택한 루트 폰트 크기, 부모 폰트 크기, 뷰포트에 맞춰 px, rem, em, pt, %, vw, vh 등 모든 CSS 길이 단위로 확인할 수 있습니다. 어떤 결과든 한 번의 탭으로 복사하세요.
자주 쓰는 변환
모든 단위로 변환됨
rem, em, %는 폰트 크기에, vw와 vh는 뷰포트에 의존합니다. px와 pt는 고정 비율입니다(1pt = 1.3333px). 기본값이 다르다면 위의 컨텍스트를 조정하세요.
px→rem 참조표 (루트 = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
기본 루트 폰트 크기 16px에서는 픽셀을 16으로 나누면 rem이 되고, 0.75를 곱하면 포인트(pt)가 됩니다.
CSS 단위 변환기 소개
CSS는 길이를 표현하는 여러 방법을 제공하며, 올바른 단위를 고르는 것이 우아하게 확장되는 레이아웃과 깨지는 레이아웃의 차이를 만듭니다. 이 변환기는 하나의 값을 모든 일반적인 CSS 단위로 한 번에 변환합니다. px(픽셀)는 절대 기준 단위로, CSS에서 1픽셀은 1/96인치로 정의됩니다. rem은 문서의 루트 폰트 크기(<html> 요소)에 상대적이며 기본값은 16px이므로 1rem = 16px, 1.5rem = 24px입니다. rem은 크기 지정의 현대적 표준인데, 루트 값 하나만 바꾸면 페이지 전체가 다시 확장되어 접근성에 매우 유리하기 때문입니다. em은 현재 요소의 부모 폰트 크기에 상대적이라 중첩하면 누적됩니다. pt(포인트)는 인쇄 단위로 1pt = 1/72인치 = 1.3333px로 고정되어 12pt = 16px입니다. font-size 컨텍스트에서 %는 부모 폰트 크기와 같으므로 100%는 1em과 동일합니다. vw와 vh는 뷰포트 너비와 높이의 1%로, 유동적인 전체 화면 레이아웃에 이상적입니다. 고급 패널에서 자신만의 루트 폰트 크기, 부모 폰트 크기, 뷰포트 크기를 설정하세요. 합리적인 기본값(16/16/1920×1080)이 일상적인 px↔rem 경우를 기본으로 처리합니다.
CSS 단위 변환 방법
- 1 값을 입력하고 해당 값의 단위를 선택하세요(예: 24 px 또는 1.5 rem).
- 2 결과 그리드에서 다른 모든 단위의 동등한 값을 확인하고, 각 카드의 복사 버튼을 눌러 붙여넣기 가능한 형식(예: "1.5rem")으로 복사하세요.
- 3 프로젝트가 16px / 1920×1080 기본값을 사용하지 않는 경우 고급 패널을 열어 루트 폰트 크기, 부모 폰트 크기, 뷰포트 크기를 변경하세요.
변환 공식
모든 변환은 고정된 CSS 비율을 사용해 픽셀을 거칩니다: rem = px ÷ 루트-폰트-크기(기본 16) — 따라서 px = rem × 16. em = px ÷ 부모-폰트-크기(기본 16). pt = px × 0.75, 1px = 1/96인치이고 1pt = 1/72인치이므로 1pt = 96/72 px = 1.3333px, 1px = 0.75pt가 됩니다. % = px ÷ 부모-폰트-크기 × 100 (font-size 백분율, 100% = 부모의 폰트 크기로 1em과 동일). vw = px ÷ 뷰포트-너비 × 100, vh = px ÷ 뷰포트-높이 × 100. 기본값에서는 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh가 됩니다. 루트 폰트 크기와 같은 기준이 0으로 설정되면 해당 단위는 정의되지 않아 무한대 대신 "—"로 표시됩니다.
자주 묻는 질문
1rem은 몇 px인가요?
기본적으로 1rem = 16px입니다. rem은 루트(<html>) 폰트 크기에 상대적이며 브라우저가 이를 기본 16px로 설정하기 때문입니다. 따라서 1.5rem = 24px, 2rem = 32px입니다. 루트 폰트 크기를 변경하면 — 예를 들어 계산을 단순화하려고 10px로 — 1rem은 그 값과 같아집니다(16px는 1.6rem이 됩니다). 고급 패널에서 자신의 루트 폰트 크기를 설정하면 변환기가 즉시 다시 계산합니다.
px에서 rem 공식은 무엇인가요?
rem = px ÷ 루트-폰트-크기이고, 반대로 px = rem × 루트-폰트-크기입니다. 기본 16px 루트에서는 픽셀 값을 16으로 나누면 rem이 됩니다: 24px ÷ 16 = 1.5rem, 10px ÷ 16 = 0.625rem. 폰트 크기와 간격에는 px보다 rem이 선호됩니다. 사용자의 브라우저 폰트 크기 설정을 존중해 접근성에 더 좋기 때문입니다.
기본 루트 폰트 크기는 무엇인가요?
모든 주요 브라우저의 기본 루트 폰트 크기는 16px이며 <html> 요소에 적용됩니다. 이것이 rem의 기준이므로 사용자(또는 스타일시트)가 재정의하지 않는 한 1rem = 16px입니다. 이 변환기는 루트와 부모 폰트 크기 모두에 16px를 기본값으로 사용하며, 고급 패널에서 둘 중 하나를 프로젝트에 맞게 변경할 수 있습니다.
px와 pt의 차이는 무엇인가요?
px(픽셀)는 화면용 표준 단위로 CSS에서 1/96인치로 정의됩니다. pt(포인트)는 전통적인 인쇄/타이포그래피 단위로 1/72인치와 같습니다. 그래서 비율이 고정됩니다: 1pt = 96/72 px ≈ 1.3333px, 1px = 0.75pt. 따라서 12pt = 16px이며, 12pt 인쇄 문서와 16px 화면 제목이 같은 크기로 보이는 이유입니다. 웹에는 px(또는 rem)를 사용하고 pt는 인쇄 스타일시트용으로 남겨 두세요.
관련 도구
UnitConv로 계속 만들어 보세요. 색상 변환기로 HEX, RGB, HSL 간 색상을 변환하고, CSS 그라디언트를 생성하고, WCAG 대비율을 확인하고, 종횡비를 계산하고, 메인 단위 변환기에서 웹을 넘어선 길이 단위도 살펴보세요.