[CSS] em과 rem 차이

em과 rem 차이

em과 rem은 CSS에서 길이를 나타내는 단위입니다. 하지만 둘은 서로 다른 방식으로 동작합니다.

em은 부모 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 따라서 부모 요소의 폰트 크기가 변경되면 해당 요소의 크기도 변경됩니다. 이는 상속 관계에서 유용하게 사용될 수 있지만, 복잡한 구조에서는 예상치 못한 크기 변화를 초래할 수 있습니다.

반면, rem은 루트 요소의 폰트 크기를 기준으로 크기가 결정됩니다. 루트 요소는 보통 HTML 문서의 'html' 요소를 의미합니다. 이는 페이지 전체에서 일관된 크기를 유지할 수 있도록 도와줍니다.

따라서 em은 부모 요소의 폰트 크기에, rem은 루트 요소의 폰트 크기에 영향을 받는다는 것이 가장 큰 차이점입니다.

예를 들어, 다음과 같은 CSS 코드가 있다고 가정해봅시다.

body {
  font-size: 16px;
}
div {
  font-size: 1.5em;
  padding: 1rem;
}

이 경우, div 요소의 폰트 크기는 부모 요소인 body 요소의 폰트 크기 * 1.5인 24px이 됩니다. 하지만 padding은 루트 요소인 html 요소의 폰트 크기 * 1인 16px을 기준으로 결정됩니다.

따라서 em과 rem은 각각의 특성에 따라 적절한 상황에서 사용되어야 합니다.

최근 업데이트

위 설명은 대체로 맞지만, rem의 경우 최근 몇 년간 브라우저에서 제공하는 기능이 추가되면서 다른 동작 방식을 가지게 되었습니다.

기존에는 rem이 루트 요소인 html의 폰트 크기를 기준으로 결정되었지만, 최근에는 브라우저에서 제공하는 '사용자 설정' 기능에 따라 rem이 다른 값으로 결정되기도 합니다. 이는 사용자가 브라우저 설정에서 폰트 크기를 변경했을 때, 그에 따라 rem이 적절하게 변경되도록 하기 위한 기능입니다.

이러한 변경으로 인해, rem의 경우 특정 상황에서는 em과 유사한 동작 방식을 가지기도 합니다. 따라서 이러한 변화에 대해 유의하여 사용해야 합니다.