(CSS) em, rem 단위

em, rem 단위

---

CSS에서 크기를 지정하는 단위인 em과 rem에 대해 알아보자.

em, rem 이란

---

em과 rem은 CSS에서 크기를 지정할때 쓰이는 단위이다. 특정 요소의 크기를 기준으로 두어 그에 따른 상대적인 크기를 지정한다. 2rem은 기준 크기의 2배, 10em은 기준 크기의 10배가 되는 방식이다.

em, rem을 px로 변환

---

em과 rem은 기준이 되는 요소와 출력되는 화면의 크기를 고려하여 px값으로 변환되어 페이지에 반영된다. em, rem 각각의 경우에 어떻게 px로 변환되는지 공부해보자.

• em

  em은 font의 크기를 지정하는 경우와 lengths의 크기를 지정하는 경우로 나뉜다.

  • font

    font-size 를 지정하는 경우이다.

    부모 요소의 font-size 를 기준으로 변환한다.

    ex)

    header {
        font-size: 16px; 
    }
        
    header-child {
        font-size: 4em; 
    }
    

    header-child 의 부모인 header 의 font-size 가 16px이므로 header-child 의 font-size 는 4 * 16 = 64px 가 된다.

  • length

    width length margin padding 같은 요소의 크기를 지정하는 경우이다.

    현재 요소의 font-size 를 기준으로 변환한다.

    ex)

    header {
        font-size: 24px;
        margin: 10rem;
    }
    

    header 의 font-size 는 24px이므로 margin 은 24 * 10 = 240px 가 된다.

• rem

  rem은 최상위 요소의 font-size 를 기준으로 변환한다. 최상위 요소는 html 요소이다.

  ex)

  html {
      font-size: 16px;
  }
    
  header {
      font-size: 1.5rem;
      padding: 10rem;
  }
  

  최상위 요소인 html 의 font-size 는 16px이므로 header 의 font-size 는 16 * 1.5 = 24px 가 되고, padding 은 16 * 10 = 160px 가 된다.