[CSS] px | em | rem 차이를 알아보자

px | em | rem 차이를 알아보자

px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위입니다. 고정된 px과 달리, 환경에 따라 변하는 em과 rem의 장점은 무엇이며, 어떤 경우에 각각의 단위를 쓰는 것이 좋은지 알아봅시다.

---

em vs. rem 차이 : 변환되는 기준이 다름

em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.

em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.

div {
  font-size: 10px;
}
div {
  font-size : 1em; /*1em 대략 10px*/
}

 

---

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. 대개는 HTML tag에서 지정된 font-size가 기준이 됩니다. 만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받습니다.

html {
  font-size : 10px; /*설정 안했을 때는 브라우저 기본 값으로 */
}
div {
  margin: 1.5em; /*대략 15px*/
}

 

=> rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면, em은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.

 

 

---

 

html {
  font-size : 15px
}

div .parent {
  margin-left : 2em; /* 15px * 2  = 30px */
}

div .childrenRem {
  margin : 2rem;  /* 15px * 2 = 30px */
}

div .childrenEm {
  font-size : 2em;  /* 15px * 2 * 2 = 60px */
}

 

div .childrenRem의 기준은 html의 폰트 사이즈 15px 이기 때문에 15px* 2 하여 30px 정도로 출력이 됩니다.

div .childrenEm의 기준은 div .parent의 2em인 15px * 2가 기준점이 되어 30px * 2인 60 px 됩니다.

 

 

 

 

---

 

해당 3개의 쓰임새를 잘 알지 못해서, CSS에서 매번 다른 크기로 출력되는 일에 고통을 받아왔습니다. em이 font-size를 표기하는 다른 방법이겠거니 하고 지나갔던 것을 오늘 제대로 배울 수 있었습니다.

 

 

 

 

참고 :

envatotuts+

http://triki.net/prgm/3250