빠른 사용법
세 단계로 확인합니다.
- 1값과 입력 단위를 정합니다
px·rem·em·% 중 현재 CSS 값을 선택합니다.
- 2루트와 부모 크기를 입력합니다
rem의 root font-size와 em·%의 부모 기준 px를 지정합니다.
- 3네 결과를 복사합니다
같은 px 기준으로 환산된 CSS 값을 개별 복사합니다.
결과 읽기
상대 단위는 문서 컨텍스트 없이는 하나의 값으로 정해지지 않습니다.
rem은 루트, em은 현재 요소의 문맥, %는 속성별 기준에 따라 달라져 입력 기준을 함께 기록해야 합니다.REM루트 기준
1rem은 html 요소의 계산된 font-size입니다.
EM부모 문맥
이 화면은 입력한 부모 px를 em 기준으로 사용합니다.
PERCENT속성별 차이
화면에서는 부모 px 대비 비율로 계산하지만 CSS 속성에 따라 실제 % 기준이 다릅니다.
font-size 중심의 빠른 환산입니다. width·height·transform·line-height 등 각 속성의 % 기준은 CSS 명세와 실제 레이아웃에서 확인하세요.
이럴 때 유용합니다.
- 디자인 px를 rem으로 옮기기
- 컴포넌트 em 크기 비교
- 부모 대비 font-size % 계산
함께 확인하세요.
- 브라우저 사용자 설정에 따라 root 크기 변화
- % 기준은 속성별로 다름
- 소수 반올림 후 시각 회귀 확인
자주 묻는 질문
사용 전 알아둘 점
1rem은 항상 16px인가요?
아닙니다. 브라우저 기본은 흔히 16px이지만 문서 CSS와 사용자 설정에 따라 달라집니다.
em과 %는 같은 기준인가요?
이 화면의 font-size 환산에서는 같은 부모 px를 쓰지만 실제 CSS 속성에 따라 % 기준이 달라질 수 있습니다.
CSS를 서버로 보내나요?
아닙니다. 숫자 계산만 현재 브라우저에서 수행합니다.