CSS) em, rem

1. em
폰트사이즈에 영향을 받는다.
자신에게 폰트사이즈가 없다면 부모의 폰트사이즈에 영향을 받는다.

css

body * {
  border: 2px solid;
}
.container {
 width: 60em;
 font-size: 10px;
}
.parent {
  width:30em;
  font-size: 2em;
}
.child {
  width: 15em;
  font-size: 2em;
}

constainer의 width는 60em * 10px(font-size)로 600px이 된다.
parent는 width가 30em * 2em(부모의 10px * 2em = 20px)으로 600px이 된다.
child는 width가 15em * 2em((부모의 10px * 2em = 20px) * 2em = 40px)으로 600px이 된다.

 

html

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class="child">Child1</div>
    <div class="child">Child2</div>
  </div>
</div>

 

출력

 

2. rem
가장 최상의 태그인 html의 font-size의 영향을 받는다.
계속해서 부모의 영향을 받는 것을 피하기 위해서 사용한다. 

css

hmtl {
  font-size: 10px; 
}
body {
  font-size: 16px;
}
body * {
  border: 2px solid;
}
.container {
 width: 60em;
 font-size: 15px;
}
.parent {
  width:30em;
  font-size: 2em;
}
.child {
  width: 20rem;
  font-size: 2em;
}

최상의 html태그에 font-size를 지정해주면 하위의 모든 후손들이 영향을 받기 때문에 body태그에 기본 font-size를 지정해주는 것이 좋다.

html

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class="child">Child1</div>
    <div class="child">Child2</div>
  </div>
</div>

 

출력