/ CSS

em과 rem의 차이

CSS는 다음과 같이 구성되어 있습니다.




오늘은 css에서 사용되는 em, rem의 차이에 대해서 알아보겠습니다. 기본적으로 폰트 크기나, 마진, 패딩과 같은 크기값을 지정할 때 픽셀(px)값으로 지정할 수 있지만, em과 rem이라는 것을 사용하는 경우가 종종 있습니다. 이 차이를 정리해보겠습니다.

rem

rem은 기준이 되는 값의 배수로 변환한 값입니다. 2rem이라면 기준이 되는 값의 2배라는 것이죠. 그러면 기준이 되는 값이 뭘까요?
바로 최상위요소(보통은 html)에서 지정된 값이 기준이 됩니다.

html {
    font-size : 14px;
}

p {
    font-size : 1.5rem;
}

위의 예시를 보면 html의 font-size가 14px로 지정되어 있고 p태그의 font-size는 1.5rem으로 지정되어있습니다.

p의 font-size는 1.5rem이므로 최상위 요소에 지정된 14px의 1.5배 값이 되어 21px이 되는 것입니다.

em

em도 기준이 되는 값의 배수로 변환한 값인데, 기준이 되는 값이 다릅니다.
바로 이것은 현재 지정요소의 값이 기준이 됩니다.

html {
    font-size : 14px;
}

div {
    font-size : 16px;
}

div {
    font-size : 1.5rem;
}

위의 예시를 보면은 div의 font-size값이 16px로 지정되어있고, 바로 밑에 1.5rem 값이 지정되어있습니다.

그러면 16 * 1.5인 24px이 적용이 되는 것이죠.

만약에 지정된 기준값이 없다면 어떻게 될까요?

해당요소는 부모요소의 지정된 값을 상속받습니다.

html { font-size: 10px; }
body { font-size: 2em; }

div.content { font-size: 2em; }

content의 font-size는 2em 이니까, 10px * 2 * 2 = 40px이 되는 것입니다.



End.