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

rem을 px로 변환해야 하는 이유

스타일시트를 열면 카드에 padding: 2.25rem이, 캡션에 font-size: 0.8125rem이 보입니다. 좋은 값이고 현대 CSS가 쓰여야 하는 방식으로 쓰였지만, 한눈에는 아무것도 알려 주지 않습니다. 그 카드 패딩은 화면에서 얼마나 클까요? 캡션은 읽을 수 있을까요? 받은 디자인 파일의 36 px와 13 px에 맞을까요? 답하려면 rem을 px로 변환합니다. 루트 글꼴 크기를 곱해 디자인 도구가 쓰는 단위로 답을 읽습니다. 보통의 방향과 반대이며, 코드를 읽거나, 목업을 빌드와 대조하거나, 픽셀로 생각하는 사람에게 레이아웃을 설명할 때 하는 일입니다.

변환은 쉽습니다. 한 페이지를 쓸 가치가 있게 하는 것은 기준값입니다. rem은 크기가 아니라 크기의 배수이며, 루트 요소의 글꼴 크기의 배수입니다. 아무도 달리 말하지 않은 브라우저에서 그 크기는 16 px이므로 1 rem은 16 px, 2.25 rem은 36 px, 0.8125 rem은 13 px입니다. 하지만 루트는 스타일시트가 바꿀 수 있고 독자가 브라우저에서 바꿀 수도 있으며, 그러면 페이지의 모든 rem 값이 함께 움직입니다. 그래서 이 페이지는 기준값을 숨기지 않고 물어서 사용합니다.

계산은 브라우저 안에서 이루어지며 아무것도 업로드되지 않습니다. 아래에는 공식, 흔한 값의 표, 변환이 지키는 것과 지키지 못하는 것, 개발자가 rem을 px로 변환해야 하는 상황, 그리고 rem 기반 스타일시트를 읽기 쉽게 유지하는 몇 가지 습관이 있습니다.

공식과 기준값

px는 rem에 기준값을 곱한 값입니다

공식은 한 번의 곱셈입니다. px = rem × 기준값. 보통의 기준값 16 px에서 1.5 rem은 24 px, 0.75 rem은 12 px, 4 rem은 64 px가 됩니다. 페이지는 결과 옆에 기준값을 표시하므로, 1.5 rem = 24 px (16 px) 같은 줄이 무엇을 가정했는지 밝히고 프로젝트와 맞는지 바로 알 수 있습니다.

내 기준값 알아내기

스타일시트에서 html이나 :root에 font-size를 설정하는 규칙을 찾아보십시오. 없다면 기준값은 브라우저 기본값 16 px입니다. 있다면 62.5% 같은 경우 16의 그 백분율을 취하십시오. 62.5%는 10 px입니다. 브라우저 개발자 도구에서 루트 요소를 선택해 계산된 글꼴 크기를 읽을 수도 있으며, 그것이 기준값 입력란에 넣을 수입니다.

루트 크기가 유동적일 때

어떤 사이트는 clamp 식을 써서 루트 크기를 창과 함께 키웁니다. 그러면 1 rem에는 하나의 픽셀 값이 전혀 없습니다. 휴대폰에서는 15 px, 넓은 모니터에서는 18 px입니다. 이 경우 모든 변환은 스냅샷입니다. 관심 있는 너비에서 보이는 기준값을 입력하고, 답이 그 너비에서만 유효함을 이해하십시오.

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

비율을 지킵니다

한 rem은 루트 글꼴 크기가 얼마든 그 값이므로, rem으로 쓴 레이아웃은 그 크기가 바뀌어도 모양을 유지합니다. rem을 px로 변환할 때 픽셀 값은 바로 그 비율을 특정한 기준값에서 구체화한 것입니다. 두 크기 사이의 비, 예컨대 본문 1 rem 위의 제목 2 rem은 어떻게 변환하든 바뀌지 않으며, 좋은 레이아웃이 의존하는 것이 바로 그 비입니다.

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

수는 전적으로 기준값에 달려 있습니다. 독자가 브라우저의 기본 글자 크기를 올렸다면, 많은 사람이 그렇게 하고 그럴 권리가 있는데, 그들에게 1 rem은 16 px가 아니며 여러분이 보는 수치는 입력란의 기준값에서만 맞습니다. 픽셀 값은 디자인을 이해하는 방법으로 다루고, 모든 방문자가 보게 될 것에 대한 약속으로 다루지 마십시오.

반올림

기준값은 대개 정수이므로 곱셈의 결과는 대개 정확합니다. 0.8125 rem은 기준값 16에서 정확히 13 px이고, 0.6875 rem은 정확히 11 px입니다. 긴 소수가 나온다면 rem 값이 입력한 기준값과 다른 기준값에서 계산되었다는 신호입니다.

흔한 값

페이지 아래쪽의 표

페이지에는 설정한 기준값에서 흔한 rem 수치가 해당하는 픽셀 값의 표가 있습니다. 0.5 rem은 8 px, 0.625는 10, 0.75는 12, 0.875는 14, 1은 16, 1.125는 18, 1.25는 20, 1.5는 24, 2는 32, 3은 48, 4는 64입니다. 간격과 활자 척도에 가장 자주 나오는 값이며, 외워 두면 스타일시트를 한눈에 읽을 수 있습니다.

픽셀로 스타일시트 읽기

유용한 연습은 자신이 쓰지 않은 스타일시트를 골라 주요 값을 한 번 픽셀로 옮기고 결과를 메모에 적는 것입니다. 본문 크기 1 rem, 제목 1.5와 2.25 rem, 컨테이너 간격 2 rem은 픽셀로 16, 24, 36, 32입니다. 이렇게 보면 디자인의 논리가 드러나고 계산기 없이 디자인 파일과 견줄 수 있습니다.

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

rem 값 입력하기

첫 번째 입력란에 rem 단위 크기를 입력하십시오. 소수도 받으므로 0.8125도 1만큼 잘 됩니다.

기준값 설정하기

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

픽셀 값 읽기

답이 바로 나타나고 옆에 기준값이 표시되므로 무엇을 가정했는지 알 수 있습니다. 메모에 복사하거나 디자인 파일과 견주십시오.

이 단위들은 어디서 왔나

CSS 픽셀

화면 밀도를 예측할 수 없게 되자 실제 픽셀로 잰 페이지는 화면이 선명해질수록 쪼그라드는 페이지가 되었습니다. 그래서 CSS 픽셀은 기준 길이로 재정의되었습니다. 편안한 독서 거리에서 본 약 1/96 인치입니다. 따라서 스타일시트의 픽셀은 화면 위의 점이 아니라 브라우저가 화면에 필요한 만큼의 점으로 대응시키는 길이 단위입니다.

rem

em은 웹보다 오래되었습니다. 금속 활자에서 그것은 주조한 블록의 폭이었고 대문자 M에서 이름을 땄으며, CSS에서는 적용 중인 글꼴 크기를 뜻하므로 요소를 중첩할수록 달라집니다. rem은 바로 그것을 피하려고 추가되었습니다. 루트 요소의 em이며 결코 누적되지 않습니다. 차이를 수치로 보려면 px를 em으로 변환해 rem을 px로 변환했을 때의 결과와 견주어 보십시오.

개발자가 rem을 px로 변환할 때

빌드를 디자인 파일과 대조하기

디자이너가 픽셀로 된 파일을 넘기고, 개발자는 코드를 rem으로 썼습니다. 페이지가 맞는지 확인하려고 rem을 px로 변환해 수를 견줍니다. 불일치는 바로 드러납니다. 1.375 rem은 22 px인데 디자인이 24라고 한다면 둘 중 하나가 틀렸습니다.

낯선 코드 읽기

스타일시트를 물려받으면 rem 값이 실제 크기를 가립니다. 주요 값 몇 개를 변환하면 디자인의 지도가 나옵니다. 글자가 얼마나 큰지, 여백이 얼마나 넓은지, 중단점이 어디에 놓이는지입니다.

버그 보고서와 문서 쓰기

페이지를 시험하는 사람은 보이는 것을 픽셀로 설명합니다. 패딩이 2.5 rem이라고 말하는 개발자는 시험자에게 별 의미가 없지만 40 px는 의미가 있습니다. 변환은 양쪽이 서로 이해하게 합니다.

픽셀로 정확해야 하는 값 설정하기

어떤 것은 정확한 기기 픽셀 수여야 하며 그렇지 않으면 흐릿해 보입니다. 한 픽셀 두께의 테두리나 24 px 격자로 그린 아이콘이 그렇습니다. 크기가 픽셀 격자에 맞아야 한다면 rem을 px로 변환해 보면 기준값에서 맞는지 알 수 있습니다.

rem을 px로 변환할 때의 함정

바뀐 루트 크기를 잊기

루트가 62.5%나 clamp 식으로 설정되어 있으면 표준 계수 16이 적용되지 않습니다. 결과는 두 기준값의 비만큼 틀립니다. 언제나 기준값부터 확인하십시오.

rem과 em 혼동하기

em은 루트가 아니라 요소 자신의 글꼴 크기에 상대적입니다. 24 px 제목 안의 1.5em은 36 px이지만 16 px 문단 안에서는 24 px입니다. 이 페이지는 그런 모호함이 없는 rem을 변환합니다. em은 em을 px로 변환을 보십시오.

화면이 같은 픽셀을 보여 준다고 가정하기

CSS 픽셀은 기기 픽셀이 아닙니다. 고밀도 화면에서는 CSS 픽셀 하나가 두세 개의 기기 픽셀일 수 있습니다. 변환은 디자인 도구와 스타일시트가 모두 쓰는 CSS 픽셀을 줍니다.

너무 일찍 반올림하기

13.333 px를 13으로 반올림한 뒤 되돌리면 처음의 0.8333이 아니라 0.8125 rem이 나옵니다. 중요할 때는 원래 rem 값을 남기십시오.

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

1 rem은 몇 픽셀인가요?

기본값이 바뀌지 않은 브라우저에서는 열여섯입니다.

2 rem은 몇 픽셀인가요?

기본 기준값에서는 서른둘입니다. 기준값이 10이면 20입니다.

왜 내 브라우저는 다른 것을 보여 주나요?

독자의 설정이나 스타일시트의 규칙이 루트 크기를 바꿨습니다. 개발자 도구에서 루트 요소의 계산된 글꼴 크기를 보십시오.

rem은 em과 같은가요?

아니요. rem은 루트 요소를 가리키고 em은 요소 자신을 가리킵니다.

내 수가 업로드되나요?

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

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

px를 rem으로 변환을 쓰십시오. 곱하는 대신 나눕니다.

rem 스타일시트를 읽기 쉽게 하는 습관

픽셀 값을 주석에 적기

gap: 1.5rem; /* 24px */ 같은 줄은 몇 글자가 들지만 다음 독자가 변환하는 수고를 덜어 줍니다. 가정한 기준값도 기록합니다.

작은 척도 쓰기

0.5, 1, 1.5, 2, 3처럼 소수의 rem 값만 쓰는 프로젝트는 익히기 쉽습니다. 하루가 지나면 생각하지 않고도 픽셀로 압니다. 그런 스타일시트를 위해 rem을 px로 변환할 때는 기억하는 것을 확인할 뿐입니다.

값에 이름 붙이기

--space-md: 1.5rem 같은 사용자 지정 속성을 쓰면 스타일시트가 수가 아니라 의도를 설명합니다. 이름이 의미를 담고 수는 한 곳에 있습니다.

다른 기본 크기로 시험하기

브라우저의 기본 글자 크기를 올리고 페이지를 보십시오. 온전히 유지된다면 레이아웃은 진정으로 rem으로 만들어진 것입니다. 깨진다면 무언가가 픽셀로 남아 있는 것입니다.

rem을 px로 변환한 뒤 픽셀 값을 잘 활용하기

수만이 아니라 비율을 견주기

스타일시트 전체의 rem을 px로 변환할 때는 크기 자체뿐 아니라 크기 사이의 비도 보십시오. 각 단계가 앞 단계의 약 1.25배인 활자 척도는 16, 20, 25, 31, 39픽셀을 주고, 1.5의 척도는 16, 24, 36, 54를 줍니다. 비를 알아채면 디자이너의 의도를 알 수 있고, 새 크기가 필요할 때 척도를 일관되게 확장할 수 있습니다.

픽셀로 생각하는 사람을 위해 옮기기

팀의 모든 사람이 rem을 읽는 것은 아닙니다. 프로젝트 관리자, 카피라이터, 고객은 흔히 스크린샷으로 작업하며 제목을 조금 키워 달라고 합니다. 지금 제목이 36 px이고 2.5 rem이면 40 px가 된다고 말할 수 있다면 대화가 짧아집니다. 이 페이지는 두 어휘 사이의 빠른 다리로 유용합니다.

터치 대상과 최소 크기 확인하기

터치 화면 지침은 대상이 최소 약 44 px이기를 요구하고, 글자 지침은 본문이 약 16 px 이상이기를 요구합니다. 둘 다 픽셀로 말합니다. rem으로 쓴 스타일시트가 이를 충족하는지 확인하려면 rem을 px로 변환해 버튼과 글자가 기준선을 넘는지 보십시오.

확대된 경우를 염두에 두기

얻은 값은 입력한 기준값에 대한 것입니다. 독자가 글자를 키울 수 있다면 기준값 20이나 24로 변환을 다시 해 보고 레이아웃이 화면에 무엇을 요구하는지 보십시오. 16에서 편안한 카드가 24에서는 넘칠 수 있고, 알아볼 가장 좋은 때는 페이지가 공개되기 전입니다.

관련 변환기

같은 계열의 도구가 이웃한 변환을 다룹니다. rem으로 돌아가려면 px를 rem으로 변환을 쓰십시오. 요소에 상대적인 크기에는 px를 em으로 변환과 em을 px로 변환이 있고, 화면에 상대적인 크기에는 px를 vw로 변환과 vw를 px로 변환이 있습니다. 같은 스타일시트의 색상에는 HEX를 RGB로 변환과 HSL을 HEX로 변환이 가까이 있고, 클래스 이름에는 텍스트를 kebab-case로 변환이 구절을 CSS가 받아들이는 이름으로 바꿔 줍니다.

계산 예

풀 리퀘스트를 검토하는데 스타일시트에 padding: 5rem 1.5rem인 히어로 섹션, 3.5rem의 제목, 1.25rem의 리드 문단이 있다고 해 봅시다. 디자인 파일은 패딩 80 px와 24 px, 56 px 제목, 20 px 리드라고 말합니다. 5를 입력해 80 px를 읽고, 1.5를 입력해 24를 읽고, 3.5를 입력해 56을 읽고, 1.25를 입력해 20을 읽습니다. 네 개가 모두 맞으므로 빌드는 충실합니다. 제목이 3.25 rem이었다면 52를 읽고 디자이너에게 닿기 전에 차이를 알아챘을 것입니다.

짧은 점검표

변환하기 전에

기준값을 찾으십시오. 스타일시트의 루트 규칙이나 개발자 도구의 계산된 크기입니다.

변환하는 동안

rem 값을 입력하고, 결과 옆에 표시된 기준값을 확인하고, 픽셀 수치를 적어 두십시오.

변환한 뒤에

디자인 파일과 견주십시오. 수가 다르면 코드를 의심하기 전에 기준값을 확인하십시오.

흔한 실수

확인 없이 16 쓰기

그것은 기본값이지 규칙이 아닙니다. 루트를 확인하십시오.

픽셀을 최종값으로 여기기

답은 한 기준값에서만 성립합니다. 더 큰 기본값을 가진 독자는 더 큰 픽셀을 봅니다.

rem과 em 섞어 쓰기

비슷해 보이지만 다르게 동작합니다. 각각에 맞는 페이지를 쓰십시오.

수치는 기기에 남습니다

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

요약

여기서 rem을 px로 변환하려면 rem 크기를 입력하고 공식 px = rem × 기준값에 따라 픽셀로 바로 읽으십시오. 기준값은 브라우저의 기본값인 16 px에서 시작하며 CSS에 맞게 바꿀 수 있습니다. 변환은 비율을 지킵니다. 한 rem은 루트 글꼴 크기가 얼마든 그 값이기 때문입니다. 독자의 설정은 알 수 없으므로 수치는 입력란의 기준값에서만 맞습니다. 0.5 rem의 8 px에서 4 rem의 64 px까지 흔한 값의 표는 스타일시트를 한눈에 읽도록 도와줍니다. 아무것도 업로드되지 않습니다.