CSS 단위 변환기 (px / rem / em)
변환 결과
px16px
rem1rem
em1em
pt12pt
%100%
관련 외부 사이트
일부 링크는 제휴 링크입니다.
관련 도구
색상 포맷 변환기색상을 HEX/RGB/HSL/HSV/CMYK로 변환하고 CSS·SwiftUI·Android·Flutter용 붙여넣기 코드를 복사하세요. 모두 브라우저에서 동작합니다.Base64 인코딩/디코딩텍스트와 Base64를 즉시 상호 변환 — 한글·이모지 안 깨짐(UTF-8), URL 세이프 Base64, 이미지를 data URL로 변환. 브라우저에서 바로, 전송 없음.Flexbox 플레이그라운드flex-direction, justify-content, align-items, wrap, gap를 전환하고 실시간 미리보기로 확인한 뒤 CSS를 복사하세요. flex 레이아웃을 빠르게 배우고 만듭니다. 브라우저에서 완결.CSS clamp() 생성기최소/최대 크기와 뷰포트 범위로 반응형 타이포그래피·여백용 유동 CSS clamp() 값을 생성하고 미리 봅니다. 브라우저에서 완결됩니다.
px, rem, em, pt, 퍼센트 간 CSS 길이를 변환합니다. rem은 루트 글꼴 크기에, em과 퍼센트는 부모(기본) 글꼴 크기에 의존하므로 두 값을 모두 설정할 수 있습니다. 기본값은 브라우저 표준인 16px입니다. 값을 입력하고 단위를 선택하면 모든 동등값이 한 번에 표시됩니다. 모든 계산은 브라우저에서 실행됩니다.
사용 방법
- 값을 입력하고 단위를 선택합니다.
- 루트 글꼴 크기와 em/% 기본 크기를 설정합니다.
- 각 단위의 동등값을 확인하거나 복사합니다.
작동 원리
모든 값은 먼저 픽셀로 변환됩니다. rem은 루트 글꼴 크기를 곱하고, em은 기본(부모) 글꼴 크기를 곱하며, pt는 CSS 비율 96/72를 사용하고, 퍼센트는 기본 크기에 값을 나눈 100을 곱합니다. 픽셀에서 각 단위로 다시 변환됩니다. 이것이 16px 루트에서 1.5rem이 24px와 같고, 12pt가 16px와 같은 이유입니다.
기능
모든 단위 한 번에
하나의 값에 대해 px, rem, em, pt, %를 함께 확인합니다.
사용자 지정 루트 및 기본값
rem, em, %가 의존하는 루트 및 부모 글꼴 크기를 설정합니다.
단위 복사
CSS에 필요한 정확한 값을 가져옵니다.
개인 정보 보호 및 즉시 실행
모든 변환은 브라우저에서 실행되며 업로드되지 않습니다.
활용 사례
반응형 디자인
픽셀 목업을 확장 가능한 rem 단위로 변환합니다.
접근성
rem을 사용하여 텍스트가 사용자의 글꼴 크기를 존중하도록 합니다.
컴포넌트
컴포넌트의 글꼴 크기에 상대적인 em 값을 계산합니다.
인쇄 스타일
인쇄 CSS에서 pt와 px 간 변환합니다.
참고 사항
- rem은 루트(html) 글꼴 크기에 상대적입니다.
- em과 퍼센트는 부모(기본) 글꼴 크기에 상대적입니다.
- pt는 표준 96/72 비율을 사용합니다(1pt = 1.333px).
- 모든 계산은 기기에서 실행되며 업로드되지 않습니다.
자주 묻는 질문
- rem과 em의 차이는 무엇인가요?
- rem은 루트 글꼴 크기에 상대적이고, em은 부모 요소의 글꼴 크기에 상대적입니다. 여기서 두 크기를 모두 설정할 수 있습니다.
- 기본값이 왜 16px인가요?
- 16px는 대부분의 브라우저에서 기본 루트 글꼴 크기이므로, 변경하지 않으면 1rem은 16px와 같습니다.
- pt는 어떻게 변환되나요?
- CSS 비율 96/72를 사용하므로 1pt는 약 1.333px이고 12pt는 16px와 같습니다.
- 퍼센트는 무엇을 기준으로 변환되나요?
- 퍼센트는 em처럼 기본(부모) 글꼴 크기에 상대적입니다. 100%는 기본 크기와 같습니다.
- 데이터가 업로드되나요?
- 아니요. 모든 것은 브라우저에서 변환되며 기기를 벗어나지 않습니다.