em vs rem

em.. rem 뭐가 다를까?

• em 부모 요소의 폰트 사이즈에 곱한 값이다.
• rem HTML의 폰트 사이즈에 곱한 값이다.

일반적인 사용 기준

• font-size에 따라 변경되어야 할 때 em, rem을 사용
  1) parent(부모)에 따라 요소의 사이즈가 변경되어야 하면 em, % 단위를 사용한다.
  2) 부모와 상관없이 browser(브라우저) 사이즈에 따라 요소의 사이즈가
  변경 되어야 할 땐 rem,viewport를 사용한다.

• 그 외에 Contents 박스의 너비와 높이를 결정할 땐viewport, %를 사용하면 좋다.

em을 권장하는 상황

1. 컴포넌트가 어디에서 사용되냐에 따라서 즉, 부모의 사이즈에 따라 변경되어야 한다면 em을 권장한다.

2. padding은 font-size에 따라 변경이 되어야하기 때문에 em을 권장한다.

rem을 권장하는 상황

1. 컴포넌트가 페이지 어디에 있어도 크기가 변하면 안된다면 rem 사용을 권장한다.

2. font-size를 결정할 때 rem을 권장한다.
   복잡한 구조에서 em을 많이 사용하면 font-size 계산이 매우 어려워질 수 있음.

3. MediaQuery의 사이즈를 정할 때에도 rem을 사용하면 화면의 변화가 깔끔하게 적용된다.

em & rem 같이 사용하는 상황

• 보통 padding을 줄 때 em 사용하면 부모 요소에 따라 크기가 변하게 된다. 이 때 부모 자식또는 요소와 요소간에 font-size가 다를 경우 깔끔하게 정렬되지 않을 수 있다.

  예를 들어 header와 h1에 동일한 padding값을 em으로 작성했다. 그리고 header의 font-size를 h1보다 크게 주었을 때 padding값이 다르게 적용되어 두 요소의 정렬이 맞지 않게 되는데
  이 때 수직 정렬을 한다면 상하는 em으로, 좌우는rem으로 주면 된다.