[CSS] font-size px, em, rem 폰트단위

px, em, rem 단위에 대해 간략히 알아봅니다.

px

pixels(픽셀) 화면 해상도에 대한 상대적 크기입니다.

 

em

해당 폰트의 대문자 M의 너비를 기준으로 한다.

지정된 요소의 font-size의 배수라고 생각하면 된다.

자신의 font-size 값이 없을 경우 부모 요소의 font-size의 영향을 받는다.

 

em 예시

자신의 font-size 값이 없을 경우

<style>
      .parent {
        font-size: 30px;
      }
      .child {
        font-size: 1em;
      }
</style>

    <div class="parent">
      <h4 class="child">font size</h4>
    </div>

 

자신의 요소에 font-size의 없고 상위 요소에 font-size값이 있으므로 1em의 값은 30 * 1 = 30px 이다.

 

자신이 요소에 font-size값이 있을 경우

<style>
      .parent {
        font-size: 30px;
      }
      .child {
        font-size: 10px;
        margin-left: 1em;
      }
</style>

    <div class="parent">
      <h4 class="child">font size</h4>
    </div>

 

child요소의 font-size 값이 존재 함으로 margin-left 값은 10px이다.

 

rem

root em 이라는 뜻

루트 요소가 가진 font-size의 배수라고 생각하면 된다.

html의 default font-size는 16px 이다.

 

<style>
      .parent {
        font-size: 30px;
      }
      .child {
        font-size: 1rem;
      }
</style>

    <div class="parent">
      <h4 class="child">font size</h4>
    </div>

 

최상위 요소(html 태그)의 폰트 사이즈 값이 16px 이므로 child요소의 font-size는 16px 이다.

 

 

em, rem 활용 구분

부모요소의 영향을 받는 em는 관리 하기 어렵기 때문에 em 보다는 root 요소의 영향을 받는 rem 단위를 사용하는게 좋다. 다만 필요시 em을 사용하는데 예를 들어 부모 태그의 폰트 사이즈에 따라 margin이나 padding 같은 범위를 지정할 때 사용하기도 한다.