CSS 단위 변환기 — px, rem, em, pt, % 온라인
px, rem, em, pt 또는 %로 CSS 값을 입력하면 다른 모든 단위의 동등값을 즉시 확인할 수 있습니다. 정확한 rem과 em 변환을 위해 사용자 지정 기본 폰트 크기(기본값 16px)를 설정하세요. 페이지 새로고침 없이 모든 계산이 실시간으로 업데이트됩니다.
기본: 16px. rem/em의 경우, 1단위 = 루트 레벨에서 16px.
작동 방식
CSS 단위가 반응형 디자인에 중요한 이유
CSS는 두 가지 광범위한 길이 단위 범주를 제공합니다: 절대 단위(px, pt, cm, mm)와 상대 단위(rem, em, %, vw, vh)입니다. 절대 단위는 컨텍스트에 관계없이 고정된 물리적 크기를 가집니다. 상대 단위는 다른 무언가에 비례해 조정됩니다. 루트 폰트 크기, 부모 요소의 폰트 크기 또는 뷰포트 크기입니다. 올바른 단위 유형을 선택하면 레이아웃이 다른 화면 크기, 사용자 폰트 기본 설정, 줌 레벨에 우아하게 적응할 수 있습니다.
픽셀(px)은 예측 가능하고 정확하기 때문에 가장 일반적인 CSS 단위이지만, 사용자의 브라우저 폰트 크기 설정을 존중하지 않습니다. 접근성을 위해 기본 폰트 크기를 20px로 늘린 사용자는 px 기반 텍스트가 변경되지 않는 반면, rem 기반 텍스트는 그에 맞게 확대됩니다. WCAG 2.1 성공 기준 1.4.4(텍스트 크기 조절)가 폰트 크기에 rem 같은 상대 단위를 사용하면 가장 쉽게 충족되는 이유입니다.
px vs rem vs em: 각각의 사용 시기
rem(루트 em)은 루트 요소의 폰트 크기에 비례합니다. 모든 브라우저에서 기본값은 16px입니다. rem은 하나의 고정 참조점(<html> 요소)에 고정되어 있어 em의 복합 효과를 피합니다. 폰트 크기, 컴포넌트 간격, 사용자 폰트 기본 설정에 따라 조정되어야 하는 모든 값에 rem을 사용하세요. 일반적인 공식: rem = px ÷ base, 예를 들어 24px ÷ 16 = 1.5rem.
em은 현재 요소의 폰트 크기에 비례하며, 그 크기 자체가 em으로 설정될 수 있어 복합 체인을 만듭니다. `font-size: 1.2em`이 설정된 부모 내부에서 자식에 `font-size: 1.2em`을 설정하면 루트 크기의 1.44배(1.2×1.2)가 됩니다. 이 때문에 em은 로컬 폰트 크기에 맞게 조정되어야 하는 간격(컴포넌트 내부의 padding과 margin)에는 유용하지만, 전역 레이아웃에는 예측하기 어렵습니다. pt(포인트)는 주로 인쇄 용도로 사용됩니다: 1pt = 1/72인치, 72pt = 1인치 ≈ 화면에서 96px.
기본 폰트 크기 선택과 디자인 시스템 활용
대부분의 브라우저는 루트 폰트 크기를 기본적으로 16px로 설정합니다. 그래서 기본 변환기 설정에서 1rem = 16px입니다. 일부 개발자는 `html { font-size: 62.5%; }`를 설정해 1rem = 10px로 만들어 암산을 단순화합니다(24px = 1.5rem 대신 2.4rem). 이 기법은 논란이 있는데, 모든 곳에서 폰트 크기를 재설정해야 하며 접근성 기본 설정과 충돌할 수 있습니다.
현대 디자인 시스템(Material Design, Apple HIG, Tailwind CSS)은 간격과 타이포그래피에 모듈식 스케일을 사용합니다. 보통 4px 또는 8px의 배수입니다. 이 단위로 작업하고 rem으로 변환하면 다른 컨텍스트에서도 일관된 시각적 리듬을 보장합니다. Tailwind의 기본 스케일은 예를 들어 4px = 1단위를 사용하므로, 값 4(16px)는 1rem과 같습니다. 잘 모를 때는 기본값을 16px로 유지하고 이 변환기를 사용해 암산 없이 정확한 rem 값을 구하세요.
자주 묻는 질문
›px를 rem으로 변환하는 방법은?
픽셀 값을 루트 폰트 크기로 나눕니다. 기본 16px 기준: rem = px ÷ 16. 따라서 24px = 1.5rem, 32px = 2rem, 48px = 3rem. 루트 폰트 크기가 10px(`html { font-size: 62.5%; }` 사용 시)라면, rem = px ÷ 10.
›브라우저 기본 폰트 크기는 얼마인가요?
사용자가 설정을 변경하지 않는 한, 모든 주요 브라우저의 루트 폰트 크기 기본값은 16px입니다. 기본 구성에서 1rem = 16px를 의미합니다. 일부 사용자는 접근성을 위해 이를 늘립니다. 텍스트에 px 대신 rem을 사용하는 핵심 이유입니다.
›rem과 em의 차이는 무엇인가요?
rem은 항상 루트 요소(<html>) 폰트 크기에 비례해 예측 가능합니다. em은 상속을 통해 변할 수 있는 현재 요소의 폰트 크기에 비례합니다. 전역 값(본문 폰트 크기, 페이지 레이아웃)에는 rem을, 로컬 컨텍스트에 맞게 조정되어야 하는 값(요소 자체 폰트 크기 대비 padding)에는 em을 사용하세요.
›1rem은 몇 픽셀인가요?
기본적으로 1rem = 16px입니다. `html { font-size: 20px }`를 설정하면 1rem = 20px. `html { font-size: 62.5% }`(기본 16px 대비 상대값)를 설정하면 1rem = 10px. 이 변환기의 기본 필드를 통해 가정 루트 크기를 변경할 수 있습니다.
›폰트 크기에 rem과 px 중 어느 것을 사용해야 하나요?
가능하면 폰트 크기에 rem을 사용하세요. rem 기반 텍스트는 사용자의 브라우저 폰트 크기 기본 설정을 존중하며, 접근성에 중요합니다. 픽셀은 브라우저 설정을 무시하기 때문에 더 큰 텍스트가 필요한 사용자는 줌의 혜택을 받지 못했습니다(브라우저 줌이 도입되기 전에).
›px를 pt로 변환하는 방법은?
1포인트 = 1/72인치 = 화면에서 1.333픽셀. 변환 공식: pt = px × 0.75. 따라서 16px = 12pt. 포인트는 주로 인쇄 CSS와 PDF나 인쇄 스타일시트 같은 물리적 미디어를 대상으로 할 때 사용됩니다.
›CSS 단위에서 %는 무엇을 의미하나요?
CSS에서 백분율은 컨텍스트에 따라 다릅니다. font-size의 경우 100% = 상속된 폰트 크기(1em과 동일). width/height의 경우 100% = 포함 블록의 크기. 이 변환기에서는 %를 기본 폰트 크기의 백분율로 처리하므로, 100% = 기본 px, 150% = 1.5 × 기본.
›62.5% 기법이란 무엇인가요?
`html { font-size: 62.5%; }`를 설정하면 1rem = 10px가 됩니다(기본 16px의 62.5% = 10px). rem 계산이 간단해집니다: 24px가 1.5rem 대신 2.4rem. 하지만 CSS 전체에서 폰트 크기를 재설정해야 하며, 서드파티 컴포넌트가 깨질 수 있습니다. 현대 디자인 토큰과 툴링 덕분에 이 기법은 덜 필요해졌습니다.
관련 도구
최종 업데이트: