CSS 픽셀(px) - 엠(em) 계산기

CSS 픽셀(px) - 엠(em) 계산기 사용법

CSS에서 em은 부모 요소의 폰트 크기에 비례하는 상대 단위입니다. 이 계산기를 사용하면 디자인 시안의 px 값을 em으로 바꾸거나, 작성한 em 스타일이 실제 화면에서 몇 px로 보이는지 빠르게 확인할 수 있습니다.

변환 방향을 선택한 뒤 값과 부모 요소의 폰트 크기를 입력하세요. 기본 웹 환경에서 자주 쓰이는 16px을 기준값으로 바로 계산할 수 있습니다.

계산 방법

em을 px로 변환할 때는 em 값에 부모 요소의 폰트 크기를 곱합니다. px을 em으로 바꿀 때는 px 값을 부모 요소의 폰트 크기로 나눕니다.

계산 예시

• 상황 1: 부모 요소의 폰트 크기가 16px이고 자식 요소에 1.5em을 적용하면 1.5 × 16 = 24이므로 실제 크기는 24px입니다.
• 상황 2: 부모 요소의 폰트 크기가 20px일 때 30px 크기를 em으로 바꾸면 30 ÷ 20 = 1.5이므로 1.5em입니다.

사용 시 주의사항 및 활용 팁

• 본 계산기 결과는 입력한 부모 요소 폰트 크기를 기준으로 한 참고용 수치입니다.
• em은 중첩된 요소에서 부모의 폰트 크기를 다시 기준으로 계산하므로, 여러 단계의 상속 구조에서는 각 부모의 실제 계산된 스타일을 확인하세요.
• 전체 사이트에서 일정한 비율을 유지해야 하는 크기에는 em보다 rem 사용이 더 편리할 수 있습니다.