처리 범위
디자인의 픽셀 값을 반응형 CSS 단위로 옮기거나 서로 다른 기준 글꼴에서 rem과 em이 실제 몇 px인지 빠르게 비교할 수 있습니다.
📐
기준 설정
px
html { font-size: 16px }
px
vw 계산 기준
px
vh 계산 기준
px
em 계산 기준
빠른 설정:
입력
px — 픽셀. 화면의 절대 단위
픽셀(px) 기준값
16 px
모든 단위 변환의 중간 기준값입니다
16px = 16px
전체 단위 변환 결과
px
입력
16px
픽셀. 화면의 절대 단위
rem
1rem
html 요소 font-size 기준 배수
em
1em
부모 요소 font-size 기준 배수
vw
1.1111vw
뷰포트 너비의 1/100
vh
1.7778vh
뷰포트 높이의 1/100
pt
12pt
포인트. 1pt = 1/72인치 ≈ 1.333px
%
100%
부모 font-size 기준 백분율
카드를 클릭하면 값이 복사됩니다
일괄 변환표
| px | rem | em | vw | vh | pt | % |
|---|---|---|---|---|---|---|
| 1px | 0.0625rem | 0.0625em | 0.0694vw | 0.1111vh | 0.75pt | 6.25% |
| 2px | 0.125rem | 0.125em | 0.1389vw | 0.2222vh | 1.5pt | 12.5% |
| 4px | 0.25rem | 0.25em | 0.2778vw | 0.4444vh | 3pt | 25% |
| 8px | 0.5rem | 0.5em | 0.5556vw | 0.8889vh | 6pt | 50% |
| 12px | 0.75rem | 0.75em | 0.8333vw | 1.3333vh | 9pt | 75% |
| 16px | 1rem | 1em | 1.1111vw | 1.7778vh | 12pt | 100% |
| 20px | 1.25rem | 1.25em | 1.3889vw | 2.2222vh | 15pt | 125% |
| 24px | 1.5rem | 1.5em | 1.6667vw | 2.6667vh | 18pt | 150% |
| 32px | 2rem | 2em | 2.2222vw | 3.5556vh | 24pt | 200% |
| 48px | 3rem | 3em | 3.3333vw | 5.3333vh | 36pt | 300% |
| 64px | 4rem | 4em | 4.4444vw | 7.1111vh | 48pt | 400% |
| 96px | 6rem | 6em | 6.6667vw | 10.6667vh | 72pt | 600% |
| 128px | 8rem | 8em | 8.8889vw | 14.2222vh | 96pt | 800% |
| 256px | 16rem | 16em | 17.7778vw | 28.4444vh | 192pt | 1600% |
공유하기
CSS 단위 변환기 이용 안내
CSS 단위 변환기란?
px, rem, em, vw, vh, pt, % 단위를 서로 자유롭게 변환하세요. root font-size와 뷰포트 크기를 직접 설정할 수 있어요.
px, rem, em, vw, vh, pt와 % 사이 값을 계산하며 루트·현재 글꼴 크기와 뷰포트 크기를 직접 기준값으로 설정합니다.
CSS 단위 변환기 사용 방법
- 1
입력 준비
변환할 숫자와 px, rem, em, vw 등 원본 CSS 단위를 선택하세요.
- 2
옵션 설정
루트·현재 글꼴 크기와 뷰포트 너비·높이를 실제 프로젝트 환경에 맞추세요.
- 3
결과 확인
대상 단위의 계산값을 복사하고 실제 요소의 상속·레이아웃에서 다시 확인하세요.
기능과 사용 전 확인사항
사용 전 확인
em과 %는 적용되는 CSS 속성과 부모 요소에 따라 기준이 달라집니다. 계산값을 실제 레이아웃에 적용해 상속 관계까지 확인하세요.
자주 묻는 질문
어떤 CSS 단위를 변환할 수 있나요?
px, rem, em, vw, vh, pt와 % 등 화면에서 제공하는 단위를 서로 변환할 수 있습니다. 상대 단위는 고정 환산값이 아니라 글꼴과 화면 기준에 의존하므로 같은 숫자도 프로젝트 환경에 따라 실제 px 값이 달라집니다.
rem과 em 결과가 달라지는 이유는 무엇인가요?
rem은 루트 글꼴 크기, em은 현재 요소의 기준 글꼴 크기를 사용하므로 입력한 기준값에 따라 결과가 달라집니다. 중첩 요소에서는 em 기준이 단계마다 누적될 수 있지만 rem은 문서 루트 기준을 계속 사용한다는 차이가 있습니다.
vw와 vh 변환에는 어떤 값이 필요한가요?
뷰포트 너비와 높이를 기준으로 계산하므로 실제 적용할 화면 크기를 입력해야 정확한 비교가 가능합니다. 모바일 브라우저의 주소창처럼 동적 뷰포트가 있는 환경에서는 실제 렌더링 결과도 함께 확인해야 합니다.
관련 도구
Border Radius 생성기
함께 사용하는 도구
8방향 radius를 개별 조절하고 실시간으로 모양을 미리보세요. CSS와 Tailwind 코드를 바로 복사할 수 있어요.
CSS Minifier / Beautifier
함께 사용하는 도구
CSS를 한 줄로 압축하거나 들여쓰기로 깔끔하게 정리하세요. 주석 제거, 공백 최적화를 지원합니다.
Box Shadow 생성기
함께 사용하는 도구
슬라이더로 box-shadow 값을 시각적으로 만드세요. 여러 레이어 추가, 실시간 미리보기, CSS 코드 바로 복사.
내 IP 조회
연관 카테고리
현재 접속 중인 내 IP 주소와 위치 정보를 확인하세요.
관련 글
CSS 단위 변환기 사용법과 활용 방법
변환할 숫자와 px, rem, em, vw 등 원본 CSS 단위를 선택하세요. 루트·현재 글꼴 크기와 뷰포트 너비·높이를 실제 프로젝트 환경에 맞추세요. 대상 단위의 계산값을 복사하고 실제 요소의 상속·레이아웃에서 다시 확인하세요.
Cron 표현식 생성기 사용법과 활용 방법
작업을 실행할 분, 시, 일, 월과 요일 조건을 선택하세요. 매번·특정 시각·간격 실행 조건을 조합하고 대상 시스템의 시간대를 확인하세요. 생성된 5필드 Cron 표현식과 한국어 실행 주기 설명이 의도와 같은지 비교하세요.
JWT 디코더 사용법과 활용 방법
분석할 JWT 문자열 전체를 입력란에 붙여 넣으세요. Header·Payload 탭과 exp·iat·nbf 시간 표시 방식을 선택해 값을 살펴보세요. 알고리즘과 클레임, 발급·만료 시간을 확인하되 별도의 서명 검증이 필요함을 기억하세요.