• 목록

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를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.