CSS 단위 변환기

언제 사용하나요?

디자인 시안의 px 값을 rem, em, vw, vh로 바꾸거나 반대로 환산해야 할 때 사용합니다.

사용 방법

• 값과 현재 단위를 입력합니다.
• 기준 폰트와 뷰포트 크기를 입력합니다.
• 모든 단위 결과를 확인합니다.

입력값 안내

rem/em/%는 기준 폰트 크기, vw/vh는 뷰포트 가로·세로 크기를 기준으로 계산합니다.

계산·변환 기준

입력 값을 먼저 px 기준으로 정규화한 뒤 기준 폰트와 뷰포트 크기를 사용해 각 CSS 단위로 환산합니다.

사용 예시

• 반응형 CSS 환산 - CSS 단위를 한 화면에서 비교합니다.
• 디자인 시안 변환 - 시안의 px 값을 rem이나 vw 같은 상대 단위로 바꿉니다.
• 단위 감각 익히기 - 같은 값이 단위별로 어느 정도인지 비교해 봅니다.

예시

• 16px, 기준 16px → 1rem, 1em, 100%
• 32px, 기준 16px → 2rem, 2em, 200%로 동시 환산

주의사항

• 잘못된 형식의 소스 데이터 입력 시 파싱 에러가 발생하거나 결과 레이아웃이 깨질 수 있습니다.
• 인코딩 표준(UTF-8)이 맞지 않거나 복잡한 중첩 구조를 가진 소스 데이터를 변환할 경우 데이터 구조가 깨지거나 누락될 수 있습니다.

자주 묻는 질문

기존 px ↔ rem 변환기와 차이가 있나요?

px와 rem 외에 em, %, vw, vh까지 함께 변환합니다.

vw와 vh는 무엇을 기준으로 하나요?

vw는 뷰포트 너비, vh는 뷰포트 높이의 1%를 기준으로 합니다.

rem 변환의 기준은 무엇인가요?

루트 글꼴 크기를 기준으로 하며, 기본값은 보통 16px입니다.

em과 rem은 어떻게 다른가요?

rem은 항상 루트 글꼴 크기를 기준으로 하고, em은 해당 요소의 글꼴 크기를 기준으로 합니다.

관련 도구

• px ↔ rem 변환기 - 기준 폰트 크기를 바탕으로 px와 rem 값을 양방향 변환합니다.
• CSS vw 단위 변환기 - px 값을 viewport 너비 기준 vw 단위로 변환하거나 그 반대로 변환합니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.
• Base64 변환기 - 텍스트를 Base64로 인코딩하거나 Base64 문자열을 원래 텍스트로 디코딩합니다.