px를 rem로 변환 Pixels ↔ Root em 무료 온라인 안전

디자이너와 개발자가 px를 rem으로 변환하는 이유

디자인 도구는 픽셀로 말합니다. 목업은 제목이 32 px, 섹션 사이 간격이 48 px, 버튼의 패딩이 16 px라고 알려 줍니다. 잘 쓴 스타일시트는 rem으로 말합니다. 이 두 언어 사이의 간극이 이 페이지가 있는 자리입니다. 픽셀로 크기를 입력하면 rem으로 읽어 주므로 CSS에 넣는 수가 디자이너가 뜻한 바를 그대로 뜻하게 됩니다. px를 rem으로 변환하는 일은 작은 행위이지만 웹사이트의 일생에서 수백 번 이루어지며, 잘못된 기준값은 공들인 레이아웃을 곳곳에서 한꺼번에 조금씩 틀리게 만듭니다.

애초에 rem을 신경 쓰는 이유는 접근성과 유연성입니다. rem은 루트 글꼴 크기의 배수이며, 브라우저는 달리 지정하지 않으면 이를 16 px로 설정하고 독자는 설정에서 자유롭게 바꿀 수 있습니다. 그래서 rem으로 쓴 레이아웃은 시력이 나쁜 사람이 기본 글자 크기를 올려도 모양을 유지합니다. 글자, 간격, 상자가 함께 커집니다. 픽셀로 쓴 레이아웃은 따라가지 않아서, 더 큰 글자를 요청한 독자는 비좁은 상자 속의 더 큰 글자를 얻거나 아무것도 얻지 못합니다. 현대의 거의 모든 스타일 가이드가 같은 말을 하는 이유입니다. 글자와 간격에는 rem을 쓰라는 것입니다.

이 페이지는 브라우저 안에서 계산합니다. 아무것도 업로드되지 않으며, 변환이 의존하는 기준값은 아래에 적혀 있고 몰래 가정되는 대신 바꿀 수 있는 입력란에 놓여 있습니다. 아래에는 공식, 흔한 크기 표, 기준값이 중요한 이유, 서둘러 px를 rem으로 변환하는 사람을 걸려들게 하는 함정, 그리고 결과를 실제 스타일시트에서 쓰는 짧은 안내가 있습니다.

공식과 기준값

rem은 px를 기준값으로 나눈 값입니다

공식은 한 번의 나눗셈입니다. rem = px ÷ 기준값. 보통의 기준값 16 px에서 24 px는 1.5 rem, 32 px는 2 rem, 8 px는 0.5 rem이 됩니다. 페이지는 입력하는 대로 결과를 보여 주고 사용한 기준값도 보여 주므로, 24 px = 1.5 rem (16 px)이라는 줄이 무엇을 가정했는지 정확히 알려 줍니다.

16은 어디서 오는가

기준값이 16 px에서 시작하는 것은 아무도 달리 말하지 않을 때 브라우저가 쓰는 값이기 때문입니다. 웹의 법칙이 아니라 기본값의 기본값이며 수십 년 동안 안정적이었습니다. CSS가 루트 글꼴 크기를 건드리지 않으면 대부분의 방문자에게 1 rem은 16 px입니다. 건드린다면 기준값은 설정한 값입니다.

62.5% 요령과 사람들이 쓰는 이유

어떤 스타일시트는 루트 크기를 62.5%로 설정하는데, 그러면 기본 브라우저에서 1 rem이 10 px가 되어 24 px가 간단히 2.4 rem이고 계산을 머릿속으로 하기 쉽습니다. 효과는 있지만 대가가 있습니다. 페이지 전체가 그 백분율에 의존하게 되고, 기준값을 16으로 기대하는 컴포넌트는 너무 작게 나옵니다. 프로젝트가 이렇게 한다면 이 페이지의 기준값 입력란에 10을 입력하십시오. 그러면 모든 수치가 CSS와 맞습니다.

변환이 지키는 것과 지키지 못하는 것

비율을 지킵니다

한 rem은 루트 글꼴 크기가 얼마든 그 값이므로, rem으로 쓴 레이아웃은 그 크기가 바뀌어도 모양을 유지합니다. 그렇게 쓰는 이유의 전부입니다. px를 rem으로 변환할 때 얻는 수는 선택한 기준값에서 픽셀 값이 가졌던 것과 같은 비율이며, 이제 확대·축소되는 방식으로 표현된 것입니다.

독자의 설정은 알 수 없습니다

수는 전적으로 기준값에 달려 있습니다. CSS가 루트 요소에 다른 크기를 설정했거나 독자가 브라우저의 기본 글자 크기를 바꿨다면, 많은 사람이 그렇게 하고 그럴 권리가 있는데, 그들에게 1 rem은 16 px가 아닙니다. 페이지의 수치는 입력란의 기준값에서만 맞습니다. 이것은 도구의 결함이 아니라 단위의 본성입니다. 상대적인 단위에는 변환할 고정된 값이 없습니다.

반올림

16으로 나누면 흔한 크기 다수(16, 24, 32, 48, 64)에서는 깔끔한 결과가, 다른 크기(10 px는 0.625 rem, 13 px는 0.8125)에서는 순환소수가 나옵니다. 페이지는 수가 필요로 하는 만큼의 자릿수를 주며, 스타일시트에 몇 자리를 남길지는 여러분이 정합니다. 브라우저는 긴 소수도 문제없이 처리하지만 0.8125rem처럼 반올림한 값이 열 자리짜리보다 읽고 유지하기 쉽습니다.

흔한 크기

페이지 아래쪽의 표

변환기 아래에는 흔한 크기 표가 있습니다. 8 px는 0.5 rem, 10 px는 0.625, 12 px는 0.75, 14 px는 0.875, 16 px는 1, 18 px는 1.125, 20 px는 1.25, 24 px는 1.5, 32 px는 2, 48 px는 3, 64 px는 4입니다. 활자 척도와 간격 체계에 가장 자주 나오는 크기이며 눈앞에 있으면 변환 한 번을 아낄 수 있습니다.

rem으로 만든 척도

유용한 습관은 작은 rem 값 묶음을 골라 되풀이해 쓰는 것입니다. 간격에는 0.5, 1, 1.5, 2, 3, 4, 글자에는 0.875, 1, 1.25, 1.5, 2를 씁니다. 디자이너는 이를 척도라 부르며 사이트를 시각적으로 일관되게 유지해 줍니다. 목업이 22 px 같은 어중간한 값을 주면 변환기로 1.375 rem임을 확인한 뒤, 척도에서 가장 가까운 값으로 반올림할지 정하십시오.

여기서 px를 rem으로 변환하는 방법

픽셀 값 입력하기

첫 번째 입력란에 픽셀 단위 크기를 입력하십시오. 소수도 받으므로 13.5 px도 14만큼 잘 됩니다.

기준값 확인하기

CSS가 루트 크기를 바꾸지 않으면 16으로 두십시오. 바꾸면 그에 맞게 바꾸십시오. 입력하는 대로 결과가 갱신됩니다.

rem 값 복사하기

수치를 읽고 단위를 뒤에 붙여 CSS에 쓰십시오. font-size: 1.5rem처럼 말입니다. 단위를 잊지 마십시오. 대부분의 속성에서 단위 없는 수는 다른 뜻입니다.

이 단위들은 어디서 왔나

CSS 픽셀은 화면의 픽셀이 아닙니다

화면 밀도를 예측할 수 없게 되자 실제 픽셀로 잰 페이지는 화면이 선명해질수록 쪼그라드는 페이지가 되었습니다. 그래서 CSS 픽셀은 기준 길이로 재정의되었습니다. 편안한 독서 거리에서 본 약 1/96 인치입니다. 이 페이지의 나머지는 모두 그 위에 세워져 있습니다. em은 웹보다 오래되었습니다. 금속 활자에서 그것은 주조한 블록의 폭이었고 대문자 M에서 이름을 땄으며, CSS에서는 적용 중인 글꼴 크기를 뜻하므로 요소를 중첩할수록 달라집니다. rem은 바로 그것을 피하려고 추가되었습니다. 루트 요소의 em이며 결코 누적되지 않습니다.

rem이 존재하는 이유

rem 이전에 개발자는 모든 것을 em이나 백분율로 크기를 정했고 중첩된 요소들이 서로를 곱했습니다. 목록 안의 목록 안의 목록은 단계마다 줄거나 늘었습니다. rem은 그들에게 하나의 고정된 기준인 루트를 주었고 누적을 없앴습니다. 둘을 비교하고 싶다면 px를 em으로 변환해서 같은 픽셀 값이 그것이 놓인 요소에 어떻게 달려 있는지 보십시오.

실제로 rem을 만나는 곳

글자

본문은 흔히 1 rem, 제목은 1.25에서 3 rem, 작은 글씨는 0.75에서 0.875 rem입니다. rem으로 쓰면 독자가 브라우저 설정 하나를 바꿔 페이지 전체를 키울 수 있습니다.

간격과 레이아웃

rem으로 쓴 마진, 패딩, 간격은 여백을 글자에 비례하게 유지합니다. 글자가 커지면 그 주위의 공간도 커지고, 더 큰 글자를 옛 상자에 구겨 넣는 대신 레이아웃이 균형을 유지합니다.

미디어 쿼리

em이나 rem으로 쓴 중단점은 독자의 글자 크기에 반응하므로, 글자를 키운 사람에게는 레이아웃이 좁은 형태로 더 일찍 바뀝니다. 알아 둘 만한 세련된 방법이지만 중단점에는 여전히 픽셀이 흔합니다.

픽셀로 남길 것

아주 가는 테두리, 상자 그림자, 얇은 아이콘은 흔히 고정된 픽셀 크기에서 가장 좋아 보입니다. 0.0625rem의 테두리가 큰 글자와 함께 0.1rem으로 커져도 누구에게도 도움이 되지 않기 때문입니다. 확대·축소되어야 할 것에는 rem을, 그렇지 않아야 할 것에는 픽셀을 쓰십시오.

px를 rem으로 변환할 때의 함정

기준값이 늘 16은 아님을 잊기

프로젝트가 html { font-size: 62.5% }를 설정하거나 유동적인 루트 크기를 쓰면 계수가 다릅니다. 이 도구를 포함해 어떤 변환기의 수든 믿기 전에 스타일시트를 확인하십시오.

루트 크기 자체를 변환하기

루트 크기를 픽셀로 설정하면 독자의 브라우저 설정이 무시되어 rem의 이점이 사라집니다. 사용자의 선호가 존중되도록 루트를 백분율로 설정하거나 그냥 두십시오.

자기 글꼴 크기를 설정한 컴포넌트 안에서 rem 쓰기

rem은 컴포넌트가 아니라 언제나 루트를 가리킵니다. 글꼴 크기 14 px에 패딩 1rem인 버튼의 패딩은 버튼 자신의 글자를 따르지 않습니다. 요소의 글자를 따르는 간격을 원한다면 그것은 em의 일입니다.

계획 없이 단위 섞기

어떤 마진에는 px, 다음 마진에는 rem, 세 번째에는 em을 쓰는 스타일시트는 이해하기 어렵습니다. 글자와 간격에는 rem, 테두리와 그림자에는 픽셀처럼 규칙을 정하고 지키십시오.

변환하기 전에 사람들이 묻는 질문

16 px는 몇 rem인가요?

기본 브라우저에서는 하나입니다. 열여섯을 기준값 열여섯으로 나눈 값입니다.

rem이 px보다 나은가요?

글자와 간격에는 대부분의 프로젝트에서 더 나은 선택입니다. 독자의 설정을 존중하기 때문입니다. 확대·축소되지 않아야 할 것에는 여전히 픽셀이 맞습니다.

왜 내 결과가 다른 사이트와 다른가요?

아마 기준값이 다를 것입니다. 입력란을 확인하십시오. 어떤 도구는 10을, 어떤 도구는 16을, 어떤 도구는 14를 가정합니다. 이 페이지는 결과 옆에 기준값을 보여 줍니다.

반올림해야 하나요?

아니요. 브라우저는 긴 소수를 받아들입니다. 가독성을 위해서만 반올림하십시오.

내 수가 업로드되나요?

아니요. 계산은 브라우저 안에서 실행되며 아무것도 어디로도 전송되지 않습니다.

되돌리려면 어떻게 하나요?

rem을 px로 변환을 쓰십시오. 나누는 대신 곱합니다.

px를 rem으로 변환할 때 현명하게 고르기

프로젝트의 기준값을 정하고 고수하기

무엇을 고르든 결정으로 삼고 프로젝트 문서에 적으십시오. 기준값에 의견이 갈리는 팀은 서로 맞지 않는 컴포넌트를 만듭니다.

마지막 순간이 아니라 디자인 단계에서 변환하기

목업을 읽으면서 px를 rem으로 변환하면 척도를 디자인에 넣게 되고 어중간한 값을 일찍 알아챕니다. 끝에 하면 그것들을 일관성 없는 수의 더미로 발견합니다.

뷰포트 단위도 고려하기

화면을 채워야 하는 제목에는 px를 vw로 변환이 크기를 뷰포트의 비율로 나타냅니다. rem과 확대·축소 방식이 달라서 둘을 함께 쓰는 경우가 많습니다.

px를 rem으로 쉽게 변환하는 습관

변환표를 머릿속에 두기

기준값 16에서는 몇 개의 기준점이 작업 대부분을 감당합니다. 4 px는 0.25 rem, 8 px는 0.5, 12 px는 0.75, 16 px는 1, 24 px는 1.5, 32 px는 2입니다. 목업이 그 사이의 값을 주면 페이지에서 px를 rem으로 변환하기 전에 어림할 수 있고, 변환기는 확인에만 쓰면 됩니다. 몇 주 지나면 보지 않고도 표를 알게 됩니다.

디자인 시스템이 일하게 하기

팀이 spacing-2나 font-lg 같은 디자인 토큰을 관리한다면 한 번 rem으로 저장하고 모두가 이름을 참조하게 하십시오. 그러면 아무도 px를 rem으로 다시 변환할 필요가 없고 척도의 변경은 한 곳에서 이루어집니다. 변환기는 토큰을 쓸 때가 아니라 토큰을 작성할 때 쓰는 도구입니다.

픽셀 값을 주석에 적기

padding: 1.25rem; /* 20px */ 같은 줄은 몇 글자가 들지만 다음 개발자가 계산기를 찾지 않아도 되게 해 줍니다. 또한 어떤 기준값을 가정했는지도 기록하므로 나중에 루트 크기가 바뀔 때 도움이 됩니다.

브라우저 설정을 바꿔서 시험하기

페이지가 rem으로 만들어졌다는 증거는 더 큰 기본 글자 크기에서도 살아남는 것입니다. 브라우저에서 설정을 바꾸고 새로 고침해서 보십시오. 깨지는 컴포넌트는 무언가가 픽셀로 남아 있거나 고정 높이가 글자를 잘라 낸 곳입니다.

관련 변환기

같은 계열의 도구가 이웃한 변환을 다룹니다. 픽셀로 돌아가려면 rem을 px로 변환을 쓰십시오. 요소에 상대적인 크기에는 px를 em으로 변환과 em을 px로 변환이 있고, 화면에 상대적인 크기에는 px를 vw로 변환과 vw를 px로 변환이 있습니다. 작업에 크기뿐 아니라 색상도 포함된다면 HEX를 RGB로 변환, RGB를 HEX로 변환, HEX를 HSL로 변환이 스타일시트의 표기법을 처리합니다.

계산 예

목업이 카드 제목을 28 px, 카드 패딩을 20 px, 카드 사이 간격을 12 px로 주고 프로젝트가 기본 기준값 16 px를 쓴다고 해 봅시다. 28을 입력해 1.75 rem을 읽고, 20을 입력해 1.25 rem을 읽고, 12를 입력해 0.75 rem을 읽습니다. 스타일시트에는 font-size: 1.75rem, padding: 1.25rem, gap: 0.75rem으로 씁니다. 브라우저 글자 크기를 20 px로 올린 방문자는 사분의 일만큼 확대된 같은 카드를 봅니다. 제목은 35 px, 패딩은 25 px, 간격은 15 px로 모두 비례합니다. 픽셀로 썼다면 제목은 28에 머물렀을 것이고 카드는 어색해 보였을 것입니다.

짧은 점검표

변환하기 전에

CSS가 쓰는 기준값을 알아내십시오. 어느 크기가 확대·축소되어야 하고 어느 크기가 그렇지 않아야 하는지 정하십시오.

변환하는 동안

픽셀 값을 입력하고, 결과 옆에 표시된 기준값을 확인하고, rem 수치를 단위와 함께 복사하십시오.

변환한 뒤에

브라우저에서 더 큰 기본 글자 크기로 페이지를 시험하고, 더는 글자를 담지 못하는 상자가 있는지 살피십시오.

흔한 실수

1 rem이 늘 16 px라고 가정하기

아무도 루트 크기를 바꾸지 않았을 때만 그렇고, 바꾼 독자도 있습니다. 다른 크기에서도 작동하도록 레이아웃을 쓰십시오.

루트 크기를 픽셀로 설정하기

독자의 선택을 무시합니다. 백분율을 쓰거나 설정하지 마십시오.

모든 것을 변환하기

모든 크기가 확대·축소되어야 하는 것은 아닙니다. 테두리와 그림자는 픽셀로 두십시오.

수치는 기기에 남습니다

계산은 로컬에서 이루어집니다. 값은 여러분의 브라우저가 사용할 뿐 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들 계정도 없습니다. 이것이 px를 rem으로 변환하는 간단한 방법입니다.

요약

여기서 px를 rem으로 변환하려면 픽셀 크기를 입력하고 공식 rem = px ÷ 기준값에 따라 rem으로 바로 읽으십시오. 기준값은 브라우저의 기본값인 16 px에서 시작하며 CSS에 맞게 바꿀 수 있습니다. 변환은 비율을 지킵니다. rem으로 쓴 레이아웃은 루트 글꼴 크기가 바뀌어도 모양을 유지합니다. 독자의 설정은 알 수 없으므로 수치는 입력란의 기준값에서만 맞습니다. 변환기 아래 표의 흔한 크기, 곧 8 px의 0.5 rem에서 64 px의 4 rem까지는 같은 계산을 되풀이하지 않게 해 줍니다. 아무것도 업로드되지 않습니다.