TIL17⎟CSS : EM과 REM

em

em 이라는 것은 부모의 폰트 사이즈에서 상대적으로 크기가 계산 되어 짐

.parent{
 font-size : 8em; //16px*8
 }
 
 .child{
  font-size : 0.5em; // 16p*8*0.5
  }v 

기본적으로 따로 지정하지 않으면, 브라우저에 저장된 폰트 사이즈는 html에 16px로 지정되어 있음
parent에 8em이라는 것은 이 parent 부모 요소인 HTML의 16px의 8배가 곱해진 값 16px*8=128px

이 parent안에 있는 child는 차일드의 부모인 parent의 0.5배가 계산되어진 64px이 브라우저에 표기가 됨

즉, parent는 800%, child는 50% 값

<div class="level1">
  <h1>level 1</h1>
   <div class ="level2">
    <h1>level2</h2>
      <div class = "level3">
        <h1>level3</h1>
      </div>
     </div>
    </div>

.level1{
 font-size : 2em; //16px*2 
 }
 .level3{
 font-size : 2em; //(16Px*2)*2
 }
 .level3{
 font-size : 2em; //(16Px*2*2)*2
 }

​

rem

root를 나타내닌 r.

em: relative to parent element
rem: relative to root element

루트에 지정된 폰트 사이즈에 따라서 크기가 결정됨

parent는 16px8=128px
html의 최고의 루트인 16px에 곱해짐 16px0.5

기본적으로 브라우저에 font-size : 100%로 지정되어 있으나, 만약 고정된 픽셀 값을 루트에서 사용하게 되면 더 이상 반응형이 되지 않음

.level1{
 font-size : 2rem; //16px*2 
 }
 .level3{
 font-size : 2rem; //16px*2 
 }
 .level3{
 font-size : 2rem; //16px*2 root 16px에 *2한 고정값
 }

rem이 직관적으로 수정하기도 좋고 보기에도 편하다는 점.
패딩사이즈 또한 em 값으로 줄 수 있음. padding : 1em;
컨테이너 자체 사이즈를 만들 때는 em과 rem은 반응형 유닛이긴 하지만 폰트 사이즈에 비례해서 변하기 때문에 결국 고정적인 값을 가짐. 컨텐츠를 조금 더 유동적으로 반들기 위해서는 %를 쓰는 게 좋음.

em과 rem은 디자인과 어떻게 사용하느냐에 따라 쓰이는 것뿐 어떤게 더 좋다는 건 없음!

ABSOLUTE : px
Relative : % em rem v*
​

💡 How can I use them in a proper way?

1. 부모 요소의 사이즈에 따라서 사이즈가 변경이 되야할 때, %나 em
   부모와 상관없이 브라우저 사이즈에 대해서 반응해야 된다면 v*나 rem

2. 요소의 너비와 높이에 따라 사이즈가 변경이 되야 한다면 %나 v*
   폰트 사이즈에 따라 사이즈가 변경이 되어야한다면 em나 rem