CSS px rem 변환기 (루트 16px 기준) 사용 안내
계산 과정
기본 입력값으로 계산하면 rem(16px root) 환산값은(는) 1 rem(16px root)입니다. 항목별 내역은 위 표에서 확인할 수 있습니다.
결과가 실제와 달라지는 경우
- 사이트가 html { font-size: 62.5%; }를 사용하면 일반 기본값에서 루트가 10px이 되어 1rem은 16px가 아니라 10px입니다. 이 페이지 결과를 그대로 적용하면 실제 크기가 37.5% 작아집니다.
- rem은 현재 요소의 부모가 아니라 문서 루트 글꼴을 기준으로 합니다. 부모 font-size가 20px일 때 1em은 20px이지만 루트가 16px이면 1rem은 계속 16px입니다.
- 브라우저 사용자가 기본 글꼴을 20px로 키워도 웹사이트가 루트를 고정 px로 덮어쓰면 확대 동작이 달라질 수 있습니다. 접근성을 위해 실제 사용자 설정에서 테스트해야 합니다.
- CSS px는 모니터의 물리 픽셀 하나와 항상 같지 않습니다. devicePixelRatio가 2인 화면에서 CSS 100px 요소는 렌더링에 200개의 장치 픽셀을 사용할 수 있습니다.
- 미디어 쿼리의 rem 기준 해석과 페이지 확대는 브라우저 구현 및 설정 영향을 받습니다. 768px을 48rem으로 바꿨다는 사실만으로 모든 기기에서 동일한 물리 폭 경계가 되지는 않습니다.
알아두면 좋은 기준
- 루트 16px에서는 px÷16=rem이고 rem×16=px입니다. 16px=1rem, 24px=1.5rem, 32px=2rem, 4px=0.25rem입니다.
- rem을 사용하면 루트 크기 변경으로 타이포그래피와 간격을 함께 비례 조절할 수 있습니다. 테두리 1px처럼 비례 확대가 불필요한 값은 px를 유지할 수 있습니다.
- 브라우저의 일반적인 기본 글꼴 크기는 16px이지만 CSS나 사용자 설정으로 바뀔 수 있습니다. 개발자 도구의 html 계산된 스타일에서 현재 기준값을 확인할 수 있습니다.
- WCAG에서 큰 텍스트의 18pt는 CSS 절대 단위로 약 24px이며 루트 16px 기준 1.5rem입니다. 굵은 글자의 14pt는 약 18.67px, 즉 약 1.167rem입니다.
자주 묻는 질문
14px은 몇 rem인가요?
루트 16px 기준으로 14÷16=0.875rem입니다. html의 실제 계산값이 18px이라면 같은 14px 목표는 약 0.778rem이므로 이 페이지의 고정 기준과 달라집니다.
1rem이 항상 16px인가요?
아닙니다. 브라우저 초기값이 흔히 16px일 뿐이며 html 요소에 18px을 지정하면 1rem은 18px입니다. 사용자 스타일과 사이트 CSS를 포함한 루트의 계산된 font-size가 기준입니다.
px 대신 rem만 쓰면 접근성이 자동으로 좋아지나요?
rem은 글자 크기 설정에 비례하기 쉬운 장점이 있지만 루트를 16px로 강제하고 확대를 막으면 이점이 줄어듭니다. 200% 확대에서 콘텐츠가 잘리지 않는지, 줄 간격과 컨테이너가 함께 대응하는지 확인해야 합니다.