EM to PX 변환기란?
EM과 PX는 CSS에서 텍스트 크기, 여백, 레이아웃을 지정할 때 가장 많이 쓰이는 두 가지 단위입니다. 픽셀(PX)은 고정된 절대 단위인 반면, EM은 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. 이 변환기는 두 단위 사이의 값을 손쉽게 환산해 주므로, 반응형 웹사이트를 만들 때 고정값과 가변값을 자유롭게 오갈 수 있습니다.
사용 방법
먼저 변환 방향을 선택하세요 — EM to PX 또는 PX to EM. 그런 다음 변환할 값과 기준 글꼴 크기(픽셀 단위)를 입력합니다. 브라우저 기본 글꼴 크기는 16px이며, 미리 입력되어 있습니다. 계산 버튼을 누르면 변환 결과가 즉시 표시됩니다.
변환 공식 알아보기
변환 원리는 간단한 비례 관계입니다. EM을 PX로 바꿀 때는 곱하면 됩니다:
$$\text{px} = \text{Value (em)} \times \text{Base (px)}$$반대로 PX를 EM으로 바꿀 때는 나눕니다:
$$\text{em} = \dfrac{\text{Value (px)}}{\text{Base (px)}}$$여기서 기준값은 해당 EM 값이 기준으로 삼는 글꼴 크기(픽셀 단위)를 의미합니다.
예시로 살펴보기
기준 글꼴 크기가 16px일 때 1.5em을 변환한다고 가정해 보겠습니다. \(\text{px} = \text{em} \times \text{기준값}\) 공식을 적용하면
$$1.5 \times 16 = 24\,\text{px}$$반대로 계산하면 \(24 \div 16 = 1.5\,\text{em}\)이 됩니다. 만약 기준값이 20px이었다면 1.5em은 30px이 됩니다.
자주 묻는 질문
기준 글꼴 크기는 얼마로 설정해야 하나요? 대부분의 브라우저는 기본값으로 16px을 사용합니다. CSS에서 루트(root)나 부모 요소의 font-size를 변경했다면, 그 값을 대신 사용하세요.
EM과 REM은 같은 건가요? 아닙니다. REM은 항상 루트 요소의 글꼴 크기를 기준으로 하지만, EM은 가장 가까운 부모 요소의 글꼴 크기를 기준으로 합니다. REM을 변환하려면 루트 글꼴 크기를 기준값으로 입력하세요.
굳이 EM을 쓰는 이유는 무엇인가요? EM 단위는 글꼴 크기에 따라 함께 확대·축소되므로, 사용자가 기본 텍스트 크기를 변경했을 때도 디자인이 더 접근성 높고 반응형으로 동작합니다.
