px ↔ rem 변환기

사용법

세 칸 중 하나에 값을 입력하면 나머지가 자동으로 계산됩니다. rem은 루트 요소(html)의 글자 크기를 1로 보는 상대 단위입니다. 기본값 16px 기준으로 1rem = 16px, 1.5rem = 24px이 됩니다.

레이아웃 여백·폰트 크기를 rem으로 두면 사용자가 브라우저 기본 글자 크기를 키웠을 때 전체가 함께 커져 접근성에 유리합니다. 디자인 시안이 px로 나왔을 때 이 표로 빠르게 옮길 수 있습니다.

프로젝트에서 html { font-size: 62.5% }처럼 기준을 10px로 잡았다면 위 "기준 폰트 크기"를 10으로 바꾸세요. 그러면 1rem = 10px로 계산됩니다.

실제 응용

전부 rem으로 바꾸는 게 답이 아니다

"px 대신 rem"이라는 말을 그대로 적용해 모든 값을 바꾸면 오히려 어색해집니다. 기준은 하나입니다. 사용자가 글자 크기를 키웠을 때 같이 커져야 자연스러운 값인가?

border-radius는 경우에 따라 다릅니다. 버튼처럼 크기가 글자를 따라 커지는 요소라면 rem이 어울리고, 아바타나 아이콘처럼 크기가 고정된 요소라면 px가 맞습니다.

미디어쿼리의 rem은 html의 font-size를 보지 않는다

알아두면 헷갈릴 일이 없어지는 부분입니다. 미디어쿼리 안의 rem은 여러분이 html에 지정한 font-size가 아니라, 브라우저 기본 글자 크기를 기준으로 계산됩니다.

그래서 html { font-size: 62.5% }로 1rem을 10px로 만들어 뒀더라도, @media (min-width: 48rem)은 480px이 아니라 768px입니다. 이 규칙을 모르면 중단점이 예상과 전혀 다른 지점에서 걸려 한참 헤매게 됩니다. 미디어쿼리에서는 계산이 어긋날 여지가 없도록 px를 쓰거나, 쓰더라도 항상 16px 기준으로 환산하세요.

62.5% 기법은 대가가 있다

html { font-size: 62.5% }로 1rem = 10px을 만드는 기법은 계산이 편해서 널리 쓰이지만, 알고 쓸 만한 부작용이 둘 있습니다.

• 외부 라이브러리의 CSS가 함께 작아집니다. 라이브러리는 대개 1rem을 16px로 가정하고 만들어져 있어서, 가져다 쓰면 전체가 62.5% 크기로 나옵니다. 컴포넌트 하나하나 크기를 다시 잡아야 합니다.
• 사용자 설정의 효과가 줄어듭니다. 브라우저 기본 글자 크기를 20px로 키운 사용자에게도 62.5%가 곱해져 12.5px가 기준이 됩니다. rem을 쓰는 원래 목적이 접근성인데, 그 효과를 스스로 깎는 셈입니다.

기본 16px를 유지하고 변환은 이 도구에 맡기는 편을 권합니다. 어차피 값은 CSS 변수로 몇 개만 정해 두고 재사용하게 됩니다.

시안이 px로 왔을 때의 순서

디자인 시안의 모든 숫자를 하나씩 변환하려 들면 시간만 오래 걸립니다. 순서를 정해 두면 훨씬 빠릅니다.

1. 시안에서 반복되는 값을 먼저 추립니다. 대개 여백은 4·8·12·16·24·32px, 글자는 12·14·16·20·24px 정도로 수렴합니다.
2. 그 값들만 위 대조표로 rem으로 바꿔 CSS 변수로 정의합니다.
3. 이후에는 변수만 씁니다. 13px, 17px처럼 어중간한 값이 시안에 있으면 대체로 실수이니 확인해 보세요.