PX to VW

PX to EM 변환 가이드: 컴포넌트 중심 디자인의 핵심

PX to EM 변환기는 부모 요소의 폰트 크기를 기준으로 픽셀 값을 EM 단위로 변환해주는 도구입니다. EM은 컴포넌트 내부에서 글자 크기와 비례하는 여백, 아이콘, 자간 등을 만들 때 가장 강력한 단위입니다.

1. EM 단위란 무엇인가요?

EM은 현재 요소에 적용된 폰트 크기를 1로 보는 상대 단위입니다. 폰트 크기가 16px인 요소에서 1em은 16px, 1.5em은 24px입니다. font-size 속성 자체에 EM을 사용하면 부모 요소의 폰트 크기를 기준으로 계산됩니다.

2. 변환 공식

• PX → EM: 변환할 px 값 ÷ 부모 폰트 크기(px) = em 값
• EM → PX: em 값 × 부모 폰트 크기(px) = px 값
• 예: 부모 폰트가 16px일 때 24px = 24 ÷ 16 = 1.5em

3. EM을 사용하기 좋은 곳

• 버튼/뱃지의 패딩: 폰트 크기만 바꾸면 버튼 전체가 비례해서 커집니다.
• 아이콘 크기: 텍스트 옆 아이콘을 1em으로 설정하면 글자와 항상 같은 크기를 유지합니다.
• letter-spacing, text-indent: 글자 크기에 비례해야 자연스러운 속성들입니다.
• 미디어 쿼리: 사용자의 폰트 설정을 존중하는 반응형 분기점을 만들 수 있습니다.

4. 주의사항: EM의 중첩 문제

EM은 부모의 폰트 크기를 상속받아 계산되므로, 중첩된 요소에 연속으로 EM을 사용하면 크기가 곱해져서 의도보다 커지거나 작아질 수 있습니다. 예를 들어 1.2em 안의 1.2em은 1.44배가 됩니다. 이런 문제를 피하려면 전역 크기는 REM 단위를 사용하고, 컴포넌트 내부의 비례 관계에만 EM을 사용하는 것이 좋습니다.

자주 묻는 질문 (FAQ)

Q. 1em은 몇 px인가요?

1em은 현재 요소에 적용된 폰트 크기와 같습니다. 별도 설정이 없다면 브라우저 기본값인 16px이므로 1em = 16px입니다. 부모 요소의 폰트 크기가 20px이면 자식 요소의 1em은 20px이 됩니다.

Q. EM과 REM의 차이는 무엇인가요?

EM은 부모(현재 요소)의 폰트 크기를 기준으로 하고, REM은 항상 html 루트 요소의 폰트 크기를 기준으로 합니다. 전역적인 크기는 REM, 컴포넌트 내부의 상대적인 크기는 EM을 쓰는 것이 일반적입니다.

Q. px를 em으로 변환하는 공식은 무엇인가요?

em 값 = 변환할 px 값 ÷ 부모 요소의 폰트 크기(px)입니다. 부모 폰트가 16px일 때 24px는 24 ÷ 16 = 1.5em이 됩니다.

Q. 언제 EM 단위를 사용하는 것이 좋나요?

버튼의 패딩, 아이콘 크기, letter-spacing처럼 글자 크기에 비례해서 함께 커지거나 작아져야 하는 속성에 적합합니다. 폰트 크기만 바꾸면 관련 요소들이 자동으로 비율을 유지합니다.