사용 방법
- 사이트에서 루트 글꼴 크기를 변경한다면 해당 값을 설정하세요(예: html { font-size: 62.5% }는 루트 크기를 10px로 만듭니다).
- 두 입력란 중 하나에 값을 입력하면 px와 rem을 서로 변환할 수 있습니다. 부모 요소를 기준으로 크기를 지정하려면 em으로 전환하세요.
- 표에서 자주 쓰는 크기를 빠르게 확인하거나 CSS 코드를 붙여넣어 모든 px 길이 값을 한 번에 변환한 뒤 결과를 복사하세요.
작동 방식
rem = px ÷ 루트 글꼴 크기입니다. 기본 루트 크기인 16px에서는 24px가 1.5rem이고 14px가 0.875rem입니다. em도 같은 계산식을 사용하지만 부모 요소의 글꼴 크기를 기준으로 하므로, 중첩된 em 값은 서로 곱해집니다. rem은 항상 루트를 기준으로 하므로 이런 문제가 없습니다.
글꼴 크기와 간격에 rem을 사용하면 사용자가 브라우저 설정에서 기본 글꼴 크기를 높였을 때 텍스트도 함께 커져 저시력 사용자에게 도움이 됩니다. 값은 소수점 넷째 자리까지 반올림됩니다.
코드 변환기는 px가 뒤따르는 숫자를 변환합니다. 주석, url(…) 및 따옴표로 묶인 문자열은 그대로 두고, 요청하면 1px도 유지합니다(얇은 테두리는 보통 1px로 유지하는 것이 좋습니다). 0px는 0으로 바꿉니다. 기본 설정에서는 @media 및 @container 조건을 그대로 둡니다. 미디어 쿼리에서 rem과 em은 설정한 루트 글꼴 크기와 관계없이 브라우저의 초기 글꼴 크기를 기준으로 하기 때문입니다. calc()의 의미를 분석하지는 않고 내부의 px 숫자만 바꾸지만, 각 길이 값을 개별 변환하므로 결과는 여전히 올바릅니다.
예시
기본 루트 크기
루트 크기가 16px일 때: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px입니다.
62.5% 기법
CSS에서 html { font-size: 62.5% }를 설정하면 루트 크기는 10px이므로 14px = 1.4rem, 24px = 2.4rem입니다. 이에 맞추려면 루트 글꼴 크기 입력란에 10을 입력하세요.
컴포넌트 변환
“1px 값 유지”를 켜면 padding: 24px 16px; border: 1px solid #ddd;가 padding: 1.5rem 1rem; border: 1px solid #ddd;로 바뀝니다.
자주 묻는 질문
rem과 em 중 어떤 단위를 사용해야 하나요?
대부분의 글꼴 크기, 간격 및 레이아웃에는 rem을 사용하세요. 어디서나 예측하기 쉽습니다. 버튼 안쪽 여백처럼 특정 컴포넌트의 텍스트 크기에 따라 함께 조정되어야 하는 경우에는 em을 사용하세요.
미디어 쿼리는 왜 rem으로 변환하지 않나요?
변환할 수는 있지만, 미디어 쿼리에서 1rem은 html의 글꼴 크기가 아니라 브라우저의 기본 글꼴 크기(보통 16px)를 의미합니다. 따라서 변환기는 기본적으로 미디어 쿼리를 건너뜁니다. 그래도 16으로 나누려면 옵션을 끄세요.
rem이 px보다 접근성에 더 좋은가요?
글꼴 크기에는 그렇습니다. rem은 사용자의 기본 글꼴 크기 설정을 따르지만 px 글꼴 크기는 이를 따르지 않습니다. 브라우저 확대/축소는 두 단위 모두에서 작동합니다.
개인정보 보호
변환 및 CSS 코드는 브라우저에서 처리되며 외부로 전송되지 않습니다.