CSS - px, em rem의 차이

px, em rem의 차이

px는 값이 고정되어있는 절대단위, em과 rem은 환경에 따라 변하는 상대단위!

• 상대단위의 종류
  em, rem, %, vw, vh 등

- px(픽셀)

절대값을 사용하는 단위(고정된 물리적인 크기)

- em

해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시
같은 element에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준!

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10em; /* 200px */
}

- rem

최상위 element에서 지정된 font-size의 값을 기준으로 변환
HTML에서 최상위 요소는 html태그 -> html요소의 font-size 속성값이 기준이 됨!

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10rem; /* 160px */
}

- 결론

타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 활용!
하지만,
1. 어느 페이지에서든 고정된 사이즈를 사용해야 할 때
=> rem
2. 부모 요소에 따라 유동적으로 변해야 할 때
=> em

그래서 보통 font-size에는 rem을 사용하고, padding이나 margin같이 화면에 따라 유연하게 변하는 크기는 em을 사용!