[CSS] em rem 차이

css의 길이 단위 중 보통 폰트나 margin, padding 등의 크기를 지정할 때는 px를 통해서 지정할 수도 있지만 상대적인 값을 표현해주는 단위인 em과 rem을 사용하기도 한다.

em과 rem의 차이를 제대로 이해하지 못해 헷갈리는 경우가 많으니 오늘 확실히 이해하고 가도록 하자.

em

---

일단 em은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다.

이때 기준이 되는 값은 현재 스타일 지정 요소의 font-size 값을 의미한다.

쉽게 말해 상위 요소 크기의 몇 배인지로 크기를 정하는 것인데

font-size: 1.2em;

으로 하면 글자 크기를 상위 요소 크기의 1.2배로 하겠다는 뜻이 되는 것이다.

div { font-size: 14px; }
div { 
		font-size: 1.2em; /* 16px */
		margin: 2em  /* 28px */
		padding: 1.3em /* 18.2 */
}

더 자세한 코드를 통해 봐보도록 하자.

먼저 처음 font-size의 값을 14px로 설정하고 그 뒤에 font-size와 margin과 padding의 값을 em을 통해서 설정해보았다.

그렇다면 각각 14px의 1.2배인 16px, 14px의 2배인 28px, 14px의 1.3배인 18.2px로 적용되는 것이다.

rem

---

rem도 em과 마찬가지로 기준이 되는 값을 지정된 배수로 변환하는 것은 같다.

하지만 rem은 기준이 되는 값이 em과 다르다. rem은 최상위 요소에서 지정된 font-size 값을 기준으로 변환하는데 이때 최상위 요소는 html 태그의 font-size 값을 말한다.

html { font-size: 14px; }
div { 
		font-size: 1.2em; /* 16px */
		margin: 2em  /* 28px */
		padding: 1.3em /* 18.2 */
}

rem의 코드 결과도 살펴봤을 때 아까 em의 코드와 달라진 것이라곤 기준이 되는 값이 html로 변한 것 말고는 결과값이 동일하다는 것을 볼 수 있다. 이렇게만보면 둘의 차이가 헷갈릴 수도 있을 것이다.

더 자세한 코드를 통해서 알아보자.

width: 10rem;
height: 10rem;
font-size: 3rem;

상위 요소의 폰트가 16px라고 할때 rem을 사용해서 코드를 작성하였다.

여기서 width의 크기는 최상위 요소인 html의 폰트가 16px이므로 16*10=160px가 된다.

하지만 단위를 em으로 바꾸면 width의 결과가 어떻게 될까?

width: 10em;
height: 10em;
font-size: 3em;

단위를 em으로 바꿨을 때 em의 결과값은 현재 스타일 지정 요소의 폰트인 3em을 기준으로 하여 16*3인 48px에 10(width)을 곱한 값인 480px가 된다.

이렇게 rem과 em의 차이에 대해서 알아보았는데 둘의 차이를 정확히 이해해야 나중에 웹페이지 스타일링에도 단위를 기재하는 부분에서 문제가 일어나지 않을 것이다.