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

em을 px로 변환하는 이유

스타일시트에는 제목에 margin-bottom: 0.75em, 버튼에 padding: 0.4em 0.9em, 텍스트 블록에 line-height 1.3em이라고 적혀 있습니다. 좋고 유연한 값이지만 머릿속에 그리기는 거의 불가능합니다. 그 여백은 몇 픽셀일까요? 버튼의 안쪽 여백은 디자인 파일의 6 px와 14 px에 맞을까요? 알아내려면 em을 px로 변환합니다. em이 가리키는 글꼴 크기를 곱하고 디자인 도구가 쓰는 단위로 답을 읽는 것입니다. 개발자가 코드를 검토하고, 빌드를 목업과 대조하고, 간격 문제를 디버깅하고, 완성된 컴포넌트를 픽셀로 생각하는 사람에게 넘길 때 묻는 질문입니다.

em은 CSS에서 변환하기 가장 까다로운 단위인데, 고정된 값이 없기 때문입니다. em은 값이 쓰이는 곳에서 유효한 글꼴 크기이며, font-size 속성 자체에서는 부모의 글꼴 크기입니다. 그래서 같은 스타일시트의 같은 규칙에서도 1.5 em이 한 곳에서는 24 px, 다른 곳에서는 36 px일 수 있습니다. 따라서 변환기는 추측하지 않습니다. em이 가리키는 글꼴 크기를 묻고, 답 옆에 보여 주고, 그것으로 계산합니다. 크기를 모른다면 아래 항목에서 브라우저에서 찾는 방법을 설명합니다.

계산은 브라우저에서 이루어지며 아무것도 업로드되지 않습니다. 아래에서 공식, 알맞은 기준을 찾는 방법, 변환이 유지하는 것과 유지하지 못하는 것, 중첩된 em 값이 어떻게 곱해지는지, 개발자가 em을 px로 변환해야 하는 때, em 기반 스타일시트를 이해하기 쉽게 유지하는 몇 가지 습관을 볼 수 있습니다.

공식과 기준

px는 em에 글꼴 크기를 곱한 값

공식은 곱셈 하나입니다. px = em × 기준입니다. 기준이 16 px이면 1.5 em은 24 px, 0.75 em은 12 px, 2 em은 32 px가 됩니다. 페이지는 결과 옆에 기준을 표시하므로 1.5 em = 24 px (16 px) 같은 줄이 무엇을 가정했는지 정확히 알려 줍니다. 요소의 글꼴 크기가 20 px이면 20을 입력하고, 1.5 em은 30 px가 됩니다.

브라우저에서 기준 찾기

개발자 도구를 열고 요소를 선택해 계산된 글꼴 크기를 보십시오. font-size 외의 모든 속성에서는 그 숫자를 기준 입력란에 넣습니다. font-size 자체에서는 대신 부모를 선택해 그 계산된 크기를 읽으십시오. 몇 초면 되고 추측을 완전히 없애 줍니다.

페이지를 볼 수 없을 때

페이지 없이 코드를 읽고 있다면, 요소에서 위로 글꼴 크기의 사슬을 따라가십시오. 요소 자신의 font-size가 있으면 그것, 없으면 부모의 것, 그렇게 스타일시트나 독자가 바꾸지 않은 한 16 px인 루트까지 올라갑니다. 크기가 em으로 주어진 곳에서는 사슬을 따라 곱하십시오. 번거로운 일이며, 그래서 대부분의 팀이 글꼴 크기에는 rem으로 정착합니다.

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

텍스트에 대한 비례를 유지합니다

결과는 입력한 기준에서 em이 뜻하는 픽셀 크기입니다. em으로 쓰인 간격이나 크기는 자신이 속한 텍스트를 따르며, 변환은 그것이 특정 텍스트 크기에서 얼마가 되는지 보여 줍니다.

페이지 전체에 하나의 답을 줄 수는 없습니다

조심해야 할 부분입니다. em은 루트가 아니라 요소 자신의 글꼴 크기, font-size에서는 부모의 글꼴 크기에 상대적입니다. 그래서 같은 1.5 em이 16 px 요소 안에서는 24 px이고 24 px 요소 안에서는 36 px이며, em 안의 em은 곱해집니다. 페이지의 수치는 입력란의 기준에 대해서만 맞고 다른 어떤 것에도 맞지 않습니다. 어디서나 유지되는 숫자 하나를 원한다면 그것이 rem의 용도입니다. 둘을 비교하려면 rem을 px로 변환해 루트 상대 단위가 어떻게 고정되는지 보십시오.

반올림

정수 기준을 곱하면 대부분의 값에서 정확한 결과가 나옵니다. 기준이 13.5 px 같은 소수라면 1.2 em 같은 값은 16.2 px가 됩니다. 브라우저는 분수 픽셀을 처리하지만, 헤어라인 테두리나 격자 위의 아이콘처럼 정수 픽셀이 필요할 때는 의도적으로 반올림하고 모양을 확인하십시오.

중첩된 em 값이 곱해지는 방식

목록 안의 목록

본문 텍스트가 16 px인 페이지를 생각해 보십시오. 목록에 font-size: 0.875em이 있어 14 px입니다. 그 안의 항목에도 font-size: 0.875em이 있어 14 × 0.875 = 12.25 px입니다. 항목 안의 목록은 다시 한 번 적용되어 10.7 px가 됩니다. 세 단계만 깊어도 텍스트는 아주 작아지는데, 아무도 그렇게 정하지 않았습니다. 컴포넌트의 em을 px로 변환했는데 답이 너무 작아 보이면 중첩을 가장 먼저 확인하십시오.

사슬을 따라 올라가기

중첩된 em의 실제 픽셀 크기를 알려면 내려오면서 기준에 각 값을 곱하십시오. 16 × 0.875 × 0.875 = 12.25입니다. 변환기는 한 번에 한 단계를 합니다. 사슬이라면 첫 값을 변환하고, 그 답을 두 번째의 기준으로 쓰고, 계속하십시오. 브라우저가 수행하는 것과 같은 산술입니다.

누적을 막는 방법

글꼴 크기에는 rem을 써서 모든 크기가 루트를 가리키게 하고, 안쪽 여백과 바깥 여백이 자기 요소의 텍스트를 따르도록 간격에는 em을 두십시오. 이 조합에서는 아무것도 누적되지 않으며, 변환하는 em 값은 언제나 곧바로 읽을 수 있는 글꼴 크기에 상대적입니다.

흔한 값

페이지 아래쪽의 표

페이지에는 설정한 기준에서 흔한 em 수치가 해당하는 픽셀 값의 표가 있습니다. 0.5 em은 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입니다. 기본 기준에서는 rem과 같은 숫자입니다. 기준을 바꾸면 표도 바뀌며, em이 실제로 무엇을 하는지 보기에 좋은 방법입니다.

두 기준을 나란히 시험해 보기

기준 14로 1.5를 입력하고, 이어 기준 20으로 입력해 보십시오. 21과 30 픽셀이 나옵니다. 이것이 em과 rem의 차이 전부를 한 번의 실험에 담은 것입니다. 같은 수치, 두 요소, 두 크기입니다.

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

em 값 입력

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

em이 가리키는 글꼴 크기 설정

요소의 글꼴 크기를, 속성이 font-size라면 부모의 것을 입력하십시오. 확실하지 않으면 16을 그대로 두고 결과를 근사치로 취급하십시오.

픽셀 값 읽기

답이 곧바로 나타나며 옆에 기준이 표시됩니다. 메모에 복사하거나 디자인 파일과 비교하십시오.

이 단위들의 유래

em

em은 웹보다 오래되었습니다. 금속 활자에서 그것은 주조된 블록의 폭이었고 대문자 M에서 이름을 땄으며, 조판가들은 지금도 엠 대시와 엠 스페이스를 말합니다. CSS에서는 유효한 글꼴 크기를 뜻하며, 그래서 요소를 중첩하면 바뀝니다.

픽셀과 rem

디스플레이의 밀도를 예측할 수 없게 되자, 실제 픽셀로 잰 페이지는 화면이 선명해질수록 줄어드는 페이지가 되었습니다. 그래서 CSS 픽셀은 편안한 독서 거리에서 본 인치의 약 1/96이라는 기준 길이로 재정의되었습니다. rem은 em의 누적을 피하려고 추가되었습니다. 루트 요소의 em이며 절대 곱해지지 않습니다. 둘 다 쓴다면 반대로 가려고 px를 em으로 변환하십시오.

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

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

디자이너는 픽셀로 된 파일을 넘기고 코드는 em으로 되어 있습니다. 페이지가 맞는지 확인하려면 각 컴포넌트의 글꼴 크기로 em을 px로 변환합니다. 라벨이 14 px이고 안쪽 여백이 0.714em 1.429em인 버튼은 10 px와 20 px가 나와야 하며, 디자인이 12와 24라면 둘 중 하나가 틀린 것입니다.

간격 디버깅

간격이 너무 크거나 작아 보일 때 원인은 대개 예상보다 크거나 작은 글꼴을 가리키는 em 값입니다. 요소의 계산된 글꼴 크기로 변환하면 산술이 문제인지 바로 알 수 있습니다.

낯선 코드 읽기

물려받은 스타일시트에는 픽셀 크기를 복원해야 하는 em 값이 가득합니다. 주요한 몇 개를 올바른 기준으로 변환하면 디자인의 지도가 생깁니다.

문서화와 테스트

페이지를 테스트하는 사람은 본 것을 픽셀로 기술합니다. 안쪽 여백이 0.9em이라고 말하는 개발자는 테스터에게 별 의미가 없지만, 12.6 px는 의미가 있습니다. 변환은 양쪽이 서로를 이해하게 합니다.

em을 px로 변환할 때의 함정

잘못된 기준 쓰기

가장 흔한 오류입니다. font-size에는 부모의 크기를, 그 밖의 모든 속성에는 요소 자신의 크기를 쓰십시오. 기준을 입력하기 전에 속성을 확인하십시오.

em으로 된 부모를 잊기

부모의 크기가 그 자체로 em이라면 사슬을 따라가야 합니다. 개발자 도구의 계산된 값을 써서 지름길로 가십시오.

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

CSS 픽셀은 기기 픽셀이 아닙니다. 고밀도 디스플레이에서는 CSS 픽셀 하나가 기기 픽셀 두세 개일 수 있습니다. 변환은 디자인 도구와 스타일시트가 공유하는 단위인 CSS 픽셀을 줍니다.

답을 약속으로 받아들이기

독자가 텍스트를 키우거나 컴포넌트가 다른 글꼴 크기로 재사용되면 픽셀은 의도대로 바뀝니다. 변환된 숫자는 하나의 상황을 기술하는 것이지 모든 상황이 아닙니다.

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

1 em은 몇 픽셀입니까?

유효한 글꼴 크기만큼입니다. 기본값의 일반 본문 텍스트에서는 16 px, 24 px 요소 안에서는 24 px입니다.

2 em은 몇 픽셀입니까?

유효한 글꼴 크기의 두 배입니다. 16 px에서는 32 px입니다.

왜 브라우저는 다른 값을 보여 줍니까?

요소의 실제 글꼴 크기가 입력한 기준과 다르기 때문입니다. 개발자 도구에서 계산된 글꼴 크기를 읽으십시오.

em은 rem과 같습니까?

아니요. em은 요소에, rem은 루트에 상대적입니다.

내 숫자가 업로드됩니까?

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

어떻게 되돌립니까?

곱하지 않고 나누는 px를 em으로를 쓰십시오.

em 스타일시트를 이해하기 쉽게 유지하는 습관

기준을 주석으로 남기기

padding: 0.75em 1.25em; /* 12px 20px at 16px */ 같은 줄은 몇 글자가 들지만 다음 독자의 변환 수고를 덜어 줍니다. 가정한 기준을 기록합니다.

컴포넌트마다 글꼴 크기를 한 번만 정하기

컴포넌트의 글꼴 크기를 루트 요소에 정의하고 안에서는 em으로 참조하십시오. 그러면 컴포넌트의 모든 값에 기준이 같고, 그것에 맞춰 자신 있게 em을 px로 변환할 수 있습니다.

간격은 em, 글자는 rem

대부분의 스타일시트가 정착하는 분리이며 산술을 단순하게 유지합니다. 화면에 상대적인 크기에는 px를 vw로와 vw를 px로가 도구입니다.

다른 텍스트 크기에서 시험하기

브라우저의 기본 텍스트 크기를 키우고 페이지를 보십시오. 간격이 텍스트를 따른다면 em 값이 제대로 작동하는 것입니다. 그렇지 않다면 무언가가 픽셀로 남아 있었던 것입니다.

까다로운 경우를 위한 방법

바깥에서 안으로 작업하기

컴포넌트가 다른 요소들 깊숙이 있고 em 값이 헷갈려 보일 때는, 크기를 아는 가장 바깥 요소에서 시작해 안쪽으로 한 단계씩 변환하며 가십시오. 가면서 각 픽셀 크기를 메모에 적으십시오. 두세 단계가 지나면 사슬 전체가 종이에 있고, 놀라운 숫자가 정확히 어디서 오는지 볼 수 있습니다. 일 분이 걸리고 한 시간의 추측을 대신합니다.

단순화할지 결정하기

레이아웃을 이해하려고 네 단계에 걸쳐 em을 px로 변환해야 한다면 스타일시트가 무언가를 말해 주는 것입니다. 글꼴 크기를 rem으로 옮겨 각각이 루트를 가리키게 하고 간격만 em으로 남기는 것을 고려하십시오. 페이지는 똑같이 보이고 내년에 훨씬 읽기 쉬울 것입니다.

관련 변환기

같은 계열의 도구가 인접한 변환을 다룹니다. em으로 돌아가려면 px를 em으로를 쓰십시오. 루트 상대 크기에는 px를 rem으로와 rem을 px로가 있고, 화면 상대 크기에는 px를 vw로와 vw를 px로가 있습니다. 같은 스타일시트의 색에는 HEX를 RGB로와 RGB를 HEX로가 표기를 처리합니다.

실제 예

버튼 컴포넌트를 검토한다고 합시다. 라벨은 14 px이고, CSS에는 padding: 0.714em 1.429em과 아이콘과 라벨 사이의 간격 0.5em이 적혀 있습니다. 기준으로 14를 입력한 다음 0.714를 넣어 10 px를, 1.429를 넣어 20 px를, 0.5를 넣어 7 px를 읽습니다. 디자인 파일은 10, 20, 8이라고 합니다. 셋 중 둘이 맞으므로 간격을 봅니다. 기준 14에서 8 px는 0.571 em일 텐데 누군가 0.5로 반올림했습니다. 검토에서 이를 지적하면 수정은 숫자 하나입니다.

짧은 점검표

변환하기 전에

개발자 도구나 코드의 글꼴 크기 사슬에서 em이 가리키는 글꼴 크기를 찾으십시오.

변환하는 동안

em 값을 입력하고, 기준을 설정하고, 결과 옆에 표시된 기준을 확인하며 픽셀을 읽으십시오.

변환한 뒤에

디자인 파일과 비교하십시오. 숫자가 다르다면 코드를 의심하기 전에 기준을 확인하십시오.

흔한 실수

확인 없이 16 쓰기

요소의 글꼴 크기가 16 px일 때만 맞습니다.

em과 rem 혼동

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

em이 누적된다는 것을 잊기

중첩된 요소 안의 값은 본 적 없는 크기에 상대적입니다. 사슬을 따라가십시오.

숫자는 기기에 머뭅니다

계산은 로컬에서 이루어집니다. 값은 사용자의 브라우저가 쓰며 어디로도 전송되지 않습니다. 나중에 지울 것도, 만들 계정도 없습니다. 이것이 em을 px로 변환하는 평범한 방법입니다.

요약

여기서 em을 px로 변환하려면 em 크기와 그것이 가리키는 글꼴 크기를 입력하고, 공식 px = em × 기준으로 결과를 픽셀로 곧바로 읽으십시오. 변환은 값이 쓰이는 곳에서 유효한 글꼴 크기에 대한 비례를 유지합니다. 페이지 전체에 하나의 답을 줄 수는 없습니다. em은 요소 자신에, font-size에서는 부모에 상대적이므로 같은 1.5 em이 16 px 요소 안에서는 24 px, 24 px 요소 안에서는 36 px이며, em 안의 em은 곱해집니다. 어디서나 유지되는 숫자 하나를 원하면 rem을 쓰십시오. 아무것도 업로드되지 않습니다.