01
글꼴과 뷰포트 기준 나누기
rem은 루트 글꼴, em은 부모 글꼴을 씁니다. vw와 vh는 현재 브라우저 창이 아니라 입력한 뷰포트 너비와 높이를 사용합니다.
HTML / CSS / 프런트엔드 코드
CSS 단위 변환기기준값을 먼저 정하는 반응형 계산
길이를 입력하거나 clamp, calc, 가로세로비 모드로 전환하세요.
CSS 단위 변환기
입력
값은 이 브라우저에서만 계산하며 전송하지 않습니다.
결과
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vh옵션
계산 완료.
디자인 시안에는 24px가 있지만 스타일시트에는 rem이나 vw가 필요할 때가 있습니다. CSS 단위 변환기는 rem의 루트 글꼴, em의 부모 글꼴, vw·vh의 뷰포트 너비와 높이를 각각 입력받습니다.
px rem 변환뿐 아니라 CSS clamp 계산기와 vw vh 변환도 한 페이지에서 이어서 할 수 있습니다. CSS 단위 변환기에 설정한 기준은 지원되는 calc() 계산에도 적용되어 서로 다른 결과를 비교하기 쉽습니다.
CSS 단위 변환기를 쓰는 이유
상대 단위가 의존하는 기준을 숨기지 않습니다.
한 길이를 다섯 단위로 확인
CSS 단위 변환기는 px·rem·em·vw·vh를 동시에 보여 줍니다. 루트 글꼴만 바꾸면 rem이, 부모 글꼴만 바꾸면 em이 달라집니다. 결과는 입력한 맥락의 값이지 다른 사이트의 실제 계산 스타일이 아닙니다.
두 지점으로 유동 크기를 만들기
작은 화면과 큰 화면의 너비 및 크기를 지정하면 중간의 vw 기울기를 계산합니다. 768px 같은 너비를 넣어 선형 구간인지 경계에 고정됐는지 확인할 수 있습니다.
변환값을 믿기 전에 확인할 것
02
갱신 방식을 선택하기
자동 계산은 변경 후 350ms가 지나면 실행됩니다. 끄면 Ctrl/Cmd+Enter로 계산할 수 있고, 변경 직후의 이전 결과는 복사할 수 없습니다.
03
끝점과 비율 검증하기
clamp 결과는 두 끝점과 중간 너비를 비교하세요. 가로세로비에서는 약분된 비율과 목표 너비에 맞춘 높이를 확인할 수 있습니다.
단위부터 유동식까지 연결된 계산
다섯 단위 동시 변환
px·rem·em·vw·vh 중 하나를 입력하면 같은 길이의 나머지 값을 표시합니다. 단위를 생략한 숫자는 px입니다.
clamp() 생성
화면 너비 두 개와 크기 두 개로 선형식을 구합니다. rem 또는 px 경계값을 선택하고 지정 너비의 크기도 미리 봅니다.
범위를 정한 calc() 평가
다섯 길이 단위와 괄호, 기본 연산을 px로 계산합니다. 길이의 덧셈·뺄셈, 단위 없는 수의 곱셈·나눗셈만 허용합니다.
가로세로비 계산
정수 너비와 높이를 약분하고 aspect-ratio CSS와 목표 너비에서 필요한 높이를 출력합니다.
결과에 적용되는 실제 제한
- 상대 단위에는 기준이 필요함
- CSS 단위 변환기는 대상 페이지의 실제 글꼴이나 뷰포트를 읽지 않습니다. 루트·부모 글꼴과 화면 너비·높이가 다르면 결과도 달라집니다.
- 모든 calc() 구문을 계산하지 않음
- %, var(), env(), 미지원 단위와 차원이 맞지 않는 연산은 거부합니다. 실제 CSS 계단식 정보를 모르는 상태에서 px값을 추측하지 않습니다.
- clamp 구간은 순서대로
- 시작 뷰포트는 끝보다 작고 최소 크기는 최대 크기보다 작거나 같아야 합니다. 음수 크기나 무한대는 결과로 내보내지 않습니다.
- 이미지를 자르지 않음
- 원본 너비·높이와 목표 너비는 양의 정수여야 합니다. 수학적 비율과 목표 높이만 구하며 사진 파일은 수정하지 않습니다.
CSS 단위 변환기 자주 묻는 질문
px를 rem으로 어떻게 변환하나요?
px 값을 루트 글꼴 크기로 나누세요. 루트가 16px이면 24px는 1.5rem입니다. 프로젝트 설정이 다르면 먼저 기준을 바꾸세요.
rem과 em은 어떤 기준으로 계산하나요?
rem은 루트 요소 글꼴을, em은 지정한 부모 글꼴을 기준으로 합니다. 중첩 요소에서는 em 결과만 달라질 수 있습니다.
vw와 vh를 px로 바꾸려면 무엇이 필요한가요?
1vw는 화면 너비의 1%, 1vh는 높이의 1%입니다. 뷰포트 값을 지정한 뒤 px를 거쳐 환산합니다.
반응형 폰트의 clamp() 값을 어떻게 계산하나요?
두 화면 너비와 그때의 글꼴 크기를 입력하면 그 사이의 직선을 계산해 clamp() 식을 만듭니다. 중간 크기도 미리 볼 수 있습니다.
기준 글꼴 크기가 16px가 아니면 어떻게 하나요?
루트 글꼴 필드를 실제 값으로 바꾸세요. 기본 16px를 그대로 쓰면 rem 출력이 해당 사이트와 달라집니다.
다른 질문이 있나요?