[CSS] CSS units 정리 | em, rem | 반응형에서 px사용을 지양하는 이유

 

unit의 종류

- unit의 종류는 크게 두 가지 종류로 나눌 수 있다

Absolute	Relative
px	%, viewport, em, rem

 

- 상대적인 유닛은 다시 두 종류로 나눌 수 있는데,

Parent	Browser
%	viewport(vh,vw)
em	rem

 부모의 값에 영향을 받는 유닛과 브라우저의 영향을 받는 유닛으로 나뉜다

---

 

반응형에서 px를 사용하기를 지양해야 하는 이유

- container의 사이즈가 변경되어도 contents가 그대로 고정된 값으로 유지된다

- 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 반응하지 않는다

 

 

---

 

em과 rem

- 1em은 픽셀 값으로 변환하면 16px(브라우저에서 지정한 기본 값)

- em은 부모의 값에 영향을 받는 반면, rem은 상속의 개념이 존재하지 않는다

   (em: relative to parent element / rem: relative to root element)

/* container > parent > child */
.container {
  display: flex;
  padding: 2em; /* 32px */
}

.parent {
  border: 1px solid burlywood;
  margin: 1em; /* 16px */
}

.child {
  font-size: 1.125em; /* 18px */
  padding: 1em; /* 16px */
  background-color: burlywood;
}

 

 

- 상황에 따라 em과 rem을 같이 사용해줄 수 있다

/* padding의 right와 left값은 고정하고 싶을 때 */
title {
padding: 0.5em 0.7rem
}

 

 

 

▼ px값을 em 값으로 계산해주는 사이트

http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.

 

 

▼ 더 자세한 설명

https://www.youtube.com/watch?v=7Z3t1OWOpHo 

출처: 엘리코딩