Responsive length & Absoulte length

상대 길이

em, ex, ch, rem, vw, vh, vmin, vmax, %

1. em
   em의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다. 여기서 기준이 되는 값이란 현재 요소의 font-size 값을 말한다.

div {
  font-size: 16px;
    }
div {
  font-size: 1.5em;
    }     

이 경우 div의 폰트 크기는 24px이 된다.
그런데, 현재 요소에 폰트 크기가 지정되지 않았다면 기준 값은 뭘로 가질까?
폰트 크기가 지정되지 않았다면 기준은 부모로부터 상속된 값을 기준으로 삼는다. 예를 통해 자세히 알아보자.

.body {
  font-size: 16px;
}
.div2 {
  font-size: 2em;
}

여기서 div2는 24px이다.

2. rem
   rem의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다. 여기서 기준이 되는 값은 최상위 요소(보통은 html 태그)에서 지정된 font-size 값을 말한다.
   em과 rem의 차이점을 예시를 통해 알아보자.

   html {font-size: 16px;
     }
   body {
   font-size: 2em;
   }
   div.box {
   font-size: 2em
   }
   div.box1 {
   font-size: 2rem;
   }
   div.box2 {
   font-size: 2em;
   }

절대 길이