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

px를 em으로 변환하는 이유

em은 CSS에서 가장 오래된 상대 단위이며 가장 많은 논쟁을 일으키는 단위입니다. 디자인 파일에서 버튼의 패딩 20 px, 아이콘 옆 간격 14 px, 제목 36 px처럼 픽셀 크기를 받았고, 그것이 속한 글자를 따라가도록 em으로 쓰고 싶다고 해 봅시다. px를 em으로 변환할 때 여러분은 특정한 질문을 하는 것입니다. 이 값이 현재 글꼴 크기의 몇 배인가? 답은 페이지가 짐작할 수 없는 수, 곧 그 값이 쓰이는 곳에서 적용 중인 글꼴 크기에 달려 있으므로, 변환기는 그 수를 입력란에 두고 드러내 놓고 사용합니다.

크기를 em으로 쓰는 이유는 글자에 속한 것이 글자와 함께 커져야 하기 때문입니다. 버튼 안쪽의 패딩은 버튼의 레이블이 커지면 더 커져야 합니다. 아이콘과 설명문 사이의 간격은 설명문이 커지면 넓어져야 합니다. 제목의 아래쪽 마진은 제목에 비례해야 합니다. 이 모든 경우에 글꼴 크기가 바뀌는 순간 픽셀 값은 틀리게 되고, em 값은 어떤 크기에서도 맞습니다. 이것이 em을 쓰는 이유의 전부이며 강력한 이유입니다.

계산은 브라우저 안에서 이루어지며 아무것도 업로드되지 않습니다. 아래에는 공식, em이 rem보다 더 많은 주의를 요구하는 이유, 뜻밖의 크기를 낳는 중첩의 함정, em이 알맞은 단위인 곳, 그리고 실제 스타일시트에서 em과 rem 가운데 고르는 방법이 있습니다.

공식과 기준값

em은 px를 글꼴 크기로 나눈 값입니다

공식은 한 번의 나눗셈입니다. em = px ÷ 기준값. 기준값이 16 px이면 24 px는 1.5 em, 8 px는 0.5 em, 20 px는 1.25 em이 됩니다. 페이지는 결과 옆에 24 px = 1.5 em (16 px)처럼 기준값을 보여 주어 무엇을 가정했는지 알 수 있게 합니다. 계산은 rem과 같고 의미는 다릅니다.

기준값이란

rem에서 기준값은 루트 요소의 글꼴 크기입니다. em에서는 값이 쓰이는 요소의 글꼴 크기이며, font-size 속성 자체에서는 부모의 글꼴 크기입니다. 그래서 em에는 하나의 답이 없습니다. 같은 스타일시트 값이 곳곳에서 서로 다른 픽셀 크기를 뜻합니다. 글자가 14 px인 버튼의 패딩을 변환한다면 기준값에 14를 입력하십시오. 32 px 제목의 마진을 변환한다면 32를 입력하십시오.

모를 때의 기본값

대략적인 수치만 원한다면 기준값을 16으로 두십시오. 아무도 바꾸지 않은 브라우저에서 보통 글자의 크기입니다. 결과는 일반 본문 글자 블록에서는 맞으며, 요소의 크기가 다르더라도 비율에 대한 감각을 줍니다.

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

글자에 대한 비율을 지킵니다

결과는 그 값이 쓰이는 곳에서 적용 중인 글꼴 크기에 대한 비율입니다. em으로 쓴 간격은 옆의 글자와 함께 커지고 줄어드는데, 낱말 주위의 간격이 바로 그렇게 동작해야 합니다.

페이지 전체에 하나의 수를 주지는 못합니다

이 점은 조심해야 합니다. em은 루트가 아니라 요소 자체의 글꼴 크기에, font-size에서는 부모의 글꼴 크기에 상대적입니다. 그래서 페이지에 하나의 답은 없습니다. 같은 1.5 em이 16 px 요소 안에서는 24 px이고 24 px 요소 안에서는 36 px이며, em 안의 em은 곱해집니다. 페이지의 수치는 입력란의 기준값에서만 맞고 다른 곳에서는 맞지 않습니다. 어디서나 통하는 하나의 수를 원한다면 그것이 rem의 용도입니다. 비교하려면 px를 rem으로 변환해서 같은 픽셀 값이 어떻게 동작하는지 보십시오.

반올림

16으로 나누면 많은 크기에서는 깔끔한 값이 나오고 다른 크기에서는 순환소수가 나옵니다. 0.8125 em 같은 값은 스타일시트에서 괜찮지만 정확한 크기가 중요하지 않다면 0.8이나 0.85로 반올림하는 편이 나을 수 있습니다. 정밀도가 중요한 곳에서는 전체 수치를 유지하십시오.

중첩의 함정

em이 누적되는 방식

목록의 font-size가 0.875em이고 그 항목들의 font-size도 0.875em이라고 해 봅시다. 목록은 부모의 87.5%입니다. 각 항목은 목록의 87.5%, 곧 부모의 약 76.6%입니다. 항목 안에 중첩된 목록은 다시 줄어들어 약 67%가 됩니다. 세 단계를 지나면 글자가 매우 작아지는데, 아무도 일부러 그렇게 쓰지 않았습니다. em이 누적된다는 말이 뜻하는 바입니다.

px를 em으로 변환할 때 중요한 이유

font-size에 쓸 픽셀 값을 em으로 변환한다면, 써야 하는 기준값은 요소 자신의 글꼴 크기가 아니라 부모의 글꼴 크기입니다. 많은 실수가 잘못된 기준값을 쓰는 데서 나옵니다. padding과 margin 같은 다른 속성에서는 기준값이 요소 자신의 글꼴 크기입니다. 규칙은 말하기 쉽고 잊기도 쉽습니다. font-size는 위를 보고, 나머지는 자기 자신을 봅니다.

뜻밖의 일을 피하는 방법

글자를 따르는 간격에는 em을, 글꼴 크기에는 rem을 쓰십시오. 그러면 글꼴 크기는 루트를 가리키므로 누적되지 않고, 간격은 여전히 자기 글자를 따라갑니다. 현대의 스타일시트 대부분이 자리 잡는 조합입니다.

흔한 크기

페이지 아래쪽의 표

변환기 아래에는 설정한 기준값에서의 흔한 크기 표가 있습니다. 8 px는 0.5 em, 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입니다. 기준값 16에서 이 수들은 rem과 같으며 그래서 사람들이 둘을 혼동합니다. 차이는 16이 무엇을 뜻하는가에 있습니다.

요소에 맞게 기준값 바꾸기

작은 버튼을 위해 기준값을 14로 설정하면 표가 바뀝니다. 이제 14 px는 1 em, 7 px는 0.5 em, 21 px는 1.5 em입니다. 직접 해 보면 1.5 em의 패딩이 14 px 버튼에서와 18 px 버튼에서 서로 다른 픽셀 크기를 갖는 모습과 그것이 왜 유용한지 알게 됩니다.

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

픽셀 값 입력하기

첫 번째 입력란에 픽셀 단위 크기를 입력하십시오. 소수도 받습니다.

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

요소의 글꼴 크기를 입력하되, font-size를 변환한다면 부모의 글꼴 크기를 입력하십시오. 확신이 없으면 16으로 두고 결과를 근삿값으로 다루십시오.

em 값 복사하기

padding: 1.25em처럼 단위를 붙여 CSS에 수치를 쓰십시오. 단위가 없는 수는 대부분의 속성에서 유효하지 않습니다.

이 단위들은 어디서 왔나

금속 활자의 em

em은 웹보다 오래되었습니다. 금속 활자에서 그것은 주조한 블록의 폭이었고 대문자 M에서 이름을 땄으며, 인쇄된 줄에서 가로 공간의 자연스러운 단위였습니다. 조판가는 지금도 엠 대시와 엠 스페이스를 말합니다. CSS에서 그 개념은 느슨한 형태로 살아남았습니다. 한 em은 현재 글꼴의 크기입니다.

픽셀과 rem

CSS 픽셀은 편안한 독서 거리에서 본 약 1/96 인치의 기준 길이이며 화면 위의 점이 아닙니다. rem은 상대적이면서도 결코 누적되지 않는 단위를 개발자에게 주려고 추가되었습니다. 그것은 루트 요소의 em입니다. 픽셀, em, rem은 함께 세 가지 필요를 충족합니다. 고정된 크기, 글자에 상대적인 크기, 페이지에 상대적인 크기입니다.

em이 알맞은 선택인 곳

버튼과 양식 입력란 안쪽의 패딩

padding: 0.5em 1em인 버튼은 어떤 글자 크기에서도 비율이 같게 보입니다. 레이블을 키우면 버튼 전체가 함께 커지는데, 도구 모음에도 히어로 배너에도 쓸 수 있는 컴포넌트에 바라는 바입니다.

아이콘 옆의 간격

아이콘 뒤에 설명문이 오면 설명문에 따라 변하는 간격이 필요합니다. 0.4em의 마진은 그렇게 하지만 6px의 마진은 그렇지 않습니다.

제목과 문단 주위의 마진

문단 간격을 em으로 쓰면 문단의 크기를 따르므로 문서의 세로 리듬을 유지하기가 더 쉽습니다. 제목의 em 마진은 중단점마다 제목의 크기가 바뀔 때도 비율을 유지합니다.

미디어 쿼리

em으로 쓴 중단점은 독자의 글자 크기에 반응하므로, 글자를 키운 사람에게는 레이아웃이 좁은 형태로 더 일찍 바뀝니다. 미디어 쿼리에서 em은 어떤 요소가 아니라 브라우저 기본값을 가리키므로 누적되지 않습니다.

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

잘못된 기준값 쓰기

가장 흔한 오류입니다. font-size에는 부모의 크기를, 나머지에는 요소 자신의 크기를 쓰십시오. 기준값을 입력하기 전에 어느 속성을 변환하는지 확인하십시오.

부모도 em일 수 있음을 잊기

부모의 글꼴 크기가 그 자체로 em이라면 실제 크기를 알기 위해 사슬을 위로 따라가야 합니다. 스타일시트가 복잡해지면 글꼴 크기는 rem으로 바꾸고 em은 간격에 남겨 두십시오.

컴포넌트 전체에 하나의 수치를 기대하기

크기가 다른 글자를 담은 컴포넌트는 각 부분에 하나의 em 값을 갖지 않습니다. 각 부분을 자기 기준값에 대해 변환하십시오.

같은 속성에 em과 rem 섞기

1rem의 패딩 옆에 1em의 마진이 있는 것은 허용되지만 흔히 혼란스럽습니다. 글꼴 크기에는 rem, 간격에는 em 같은 규칙을 정하고 지키십시오.

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

16 px는 몇 em인가요?

적용 중인 글꼴 크기가 16 px라면 하나입니다. 요소의 글꼴 크기가 20 px라면 16 px는 0.8 em입니다.

em이 rem보다 나은가요?

어느 쪽이 더 낫지는 않습니다. rem은 글꼴 크기와 전체 레이아웃에 더 낫습니다. em은 자기 글자를 따라야 하는 간격에 더 낫습니다.

패딩이 왜 예상보다 큰가요?

요소의 글꼴 크기에 상대적이고 그것이 짐작보다 클 수 있기 때문입니다. 브라우저 개발자 도구에서 계산된 글꼴 크기를 확인하십시오.

소수를 써도 되나요?

네. 0.625em과 1.333em 같은 값은 정상입니다.

내 수가 업로드되나요?

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

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

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

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

그 값이 무엇에 속하는지 정하기

글자에 속하면 em이 맞습니다. 열 너비나 섹션 간격처럼 페이지에 속하면 rem이나 뷰포트 단위가 더 잘 맞습니다. px를 vw로 변환은 크기를 화면 너비의 비율로 나타냅니다.

의도를 주석에 쓰기

padding: 0.75em 1.25em; /* 12px 20px at 16px */ 같은 줄은 근거를 눈에 보이게 합니다. 나중에 글꼴 크기가 바뀌면 그 수들이 무엇을 뜻했는지 알 수 있습니다.

컴포넌트의 글꼴 크기를 한 곳에 두기

컴포넌트의 루트 요소에 글꼴 크기를 설정하고 그 안의 모든 것이 그것을 가리키게 하십시오. 그러면 컴포넌트 안의 em 값이 어디서나 같은 뜻을 가지며, 하나의 기준값에 대해 px를 em으로 변환할 수 있습니다.

px를 em으로 변환할 때의 좋은 습관

컴포넌트 하나씩 px를 em으로 변환하기

스타일시트 전체의 px를 한 번에 em으로 변환하려 하지 마십시오. 카드나 버튼처럼 컴포넌트 하나를 골라 글꼴 크기를 정하고, 그 크기에 대해 간격 값을 하나씩 변환하십시오. 컴포넌트가 끝나면 두세 가지 글자 크기에서 시험하십시오. 그다음 다음 컴포넌트로 넘어가십시오.

계산기는 둥근 값이 아니라 어중간한 값에 쓰기

8, 16, 24 픽셀 같은 값은 기준값 16에서 깔끔한 em 수로 변환됩니다. 22나 13 같은 어중간한 값은 긴 소수를 줍니다. 이런 값을 px에서 em으로 변환할 때는 디자인이 정말로 정확한 수치를 요구하는지, 아니면 가장 가까운 둥근 em 값도 똑같이 좋은지 판단하십시오. 디자이너는 대개 반올림해도 만족하며, 깔끔한 스타일시트는 유지하기 쉽습니다.

기준값을 기록해 두기

각 em 값 옆에 기준값이 무엇이었는지 적은 짧은 주석은 다음 사람을 돕습니다. 누군가 나중에 컴포넌트의 글꼴 크기를 바꾸면, 간격이 우연이 아니라 의도적으로 그것을 따른다는 것을 알게 됩니다. 한 번 적어 두는 데 드는 시간은 그만한 가치가 있습니다.

rem 환산값과 비교하기

값에 em이 맞는지 rem이 맞는지 확신이 없다면 px를 em으로도 rem으로도 변환하고, 글자 크기가 바뀔 때 어떻게 되어야 하는지 물어보십시오. 값이 요소 자신의 글자를 따라야 하면 em을, 페이지를 따라야 하면 rem을 고르십시오.

관련 변환기

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

계산 예

버튼 레이블이 14 px이고 디자인이 버튼에 세로 패딩 10 px, 가로 패딩 20 px을 준다고 해 봅시다. 기준값으로 14를 입력하고, 10을 입력해 0.714 em을 읽고, 20을 입력해 1.429 em을 읽습니다. 스타일시트에는 padding: 0.714em 1.429em으로 씁니다. 같은 버튼을 레이블이 18 px인 히어로에서 쓰면 패딩은 비례해서 12.9 px와 25.7 px가 됩니다. 10px와 20px로 썼다면 버튼은 더 큰 글자 주위에서 얇아 보였을 것입니다.

짧은 점검표

변환하기 전에

값이 어느 속성에 속하는지 정하고, 그것이 상대적이어야 하는 글꼴 크기를 찾으십시오.

변환하는 동안

픽셀 값과 알맞은 기준값을 입력하고, em 수치를 단위와 함께 복사하십시오.

변환한 뒤에

브라우저에서 컴포넌트의 글꼴 크기를 바꿔 보고 간격이 따라오는지 확인하십시오. 누적되는 중첩 em 값이 있는지 살피십시오.

흔한 실수

패딩의 기준값으로 루트 크기를 쓰기

그것은 rem의 일입니다. em은 요소 자신의 글꼴 크기를 가리킵니다.

모든 글꼴 크기에 em 쓰기

중첩된 em 글꼴 크기는 누적되어 뜻밖의 결과를 낳습니다. 글꼴 크기에는 rem을 쓰십시오.

보기엔 깔끔하지만 틀린 수로 반올림하기

큰 글꼴에 곱하면 1.43은 1.5와 같지 않습니다. 자릿수를 충분히 남기십시오.

수치는 기기에 남습니다

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

요약

여기서 px를 em으로 변환하려면 픽셀 크기와 그것이 상대적인 글꼴 크기를 입력하고 공식 em = px ÷ 기준값에 따라 결과를 바로 읽으십시오. 변환은 값이 쓰이는 곳에서 적용 중인 글꼴 크기에 대한 비율을 지킵니다. 페이지에 하나의 답을 주지는 못합니다. em은 요소 자신의 글꼴 크기에, font-size에서는 부모의 것에 상대적이므로 같은 1.5 em이 16 px 요소 안에서는 24 px, 24 px 요소 안에서는 36 px이며 em 안의 em은 곱해집니다. 어디서나 통하는 하나의 수가 필요하면 rem을 쓰십시오. 아무것도 업로드되지 않습니다.