표준 폰트를 기준으로 em 계산시 필요 (px -> em)

px → em 변환을 정확하게 하기 위해서는 상대적인 기준값을 이해하고 있어야 합니다. 이 계산은 CSS에서 상대 단위를 사용할 때 매우 중요합니다.

---

1. 기본 개념 정리

• px (픽셀): 고정된 단위로, 화면의 실제 픽셀 수를 의미합니다.
• em: 상속된 폰트 크기를 기준으로 하는 상대 단위입니다.
  • 1em = 부모 요소의 font-size
  • 2em = 부모의 글자 크기의 두 배

---

2. 변환 공식

css

복사편집

N px → em 변환 공식: N(px) / 기준 폰트 크기(px) = N(em)

• 예시: 기준 폰트 크기가 16px일 때
  • 32px = 32 / 16 = 2em
  • 12px = 12 / 16 = 0.75em

 3. 기준 폰트 크기를 결정하는 원칙

위치기준이 되는 값

html 태그 내부	브라우저 기본값 (대개 16px)
자식 요소	부모 요소의 font-size

 

즉, em은 현재 요소의 부모 폰트 사이즈에 따라 달라짐

---

4. em과 rem 차이

단위기준설명

em	부모 요소의 폰트 크기	중첩 시 누적됨
rem	html의 폰트 크기	항상 동일한 기준 (보통 16px)

 

html { font-size: 16px; } div { font-size: 2em; /* 부모의 font-size 기준 */ }

---

5. 폰트 중첩과 em 계산 시 주의점

html { font-size: 16px; } .container { font-size: 1.25em; /* 1.25 * 16 = 20px */ } .child { font-size: 1.2em; /* 1.2 * 20 = 24px */ }

• .child 요소는 24px이 됩니다 (1.2em * 20px)

---

 6. em 단위를 사용하는 주요 이유

• 반응형 디자인: 폰트 크기가 부모에 비례해서 바뀌므로 유연함
• 접근성 향상: 사용자 브라우저 설정에 따라 폰트 자동 조정
• 재사용성 증가: 컴포넌트 크기를 더 유연하게 제어 가능

---

 7. px → em 변환 실전 테이블 (기준 16px)

pxem

8	0.5em
10	0.625em
12	0.75em
14	0.875em
16	1em
18	1.125em
20	1.25em
24	1.5em
32	2em

 

---

8. px → em 계산 자동화 팁

• Sass/SCSS 함수:

@function em($px, $base: 16) { @return ($px / $base) * 1em; } .element { font-size: em(24); // => 1.5em }

• VSCode 플러그인 or 온라인 계산기:
  • https://pxtoem.com/