CSS: em, px, pt, percent 변환 및 공식

em을 px로, px을 em으로 변환해야 하는 경우가 생겼습니다.
단위를 변환한 공식을 정리합니다.

em, px 기준

• px
  장치(모니터)에 따라서 상대적인 크기를 가짐. 화면 해상도에 대한 상대크기

• em
  해당 폰트의 대문자 M의 너비를 기준으로 함. 지정되거나 상속받은(또는 상위 Element)에 대한 백분율 상대 크기

• percent(%)
  기본글꼴의 크기에 대하여 상대적인 값을 가짐

• pt(point)
  일반 문서(워드)에서 많이 사용하는 단위

변환 기준

1. 기준 폰트 사이즈: 16px

   px	em	percent(%)	pt(point)
   16px	1em	100%	12pt

2. 기준 폰트 사이즈: 16px

   px	em	percent(%)	pt(point)
   50px	3.125em	312.5%	37.5pt

변환 공식

기준 폰트 사이즈 : 16px / 원하는 폰트 사이즈 : 50px

px -> em

16px / 50px = 3.125em
기준 폰트 사이즈 / 원하는 폰트 사이즈 = em

px -> percent(%)

50px / 16px * 100 = 312.5%
원하는 폰트 사이즈 / 기준 폰트 사이즈 * 100 = percent(%)

px -> pt

50px * 0.75 = 37.5pt
원하는 폰트 사이즈 * 0.75 = pt

em -> px

3.125em * 16px = 50px
원하는 폰트 em * 기준 폰트 사이즈 = 원하는 폰트 사이즈

em -> percent(%)

3.125em * 100 = 312.5%
원하는 폰트 em * 100 = percent(%)

응용

px 를 em 으로 변환하기

<div class="div" style="font-size: 50px;">
  테스트 - px
</div>
<div class="div_tmp" style="font-size: 50px;">
  테스트 - em
</div>

<script>
  let font_px = Number($('.div_tmp').css('font-size').replace('px','')); // px
  let font_px_em = font_px / 16; //px to em
  //let font_em_px = font_px_em * 16 //em to px

  $(".div_tmp").css('font-size', font_px_em + 'em');
</script>

px to em 결과

참고자료

1. http://chongmoa.com/