rem, em

 

1. rem
2. em
3. 차이점

HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다.

그런데 이 rem 과 em 이 표현하는 내용이 가끔 헷갈릴때가 있어 정리해둡니다.

rem

rem 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값은 최상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 이야기 합니다.

예를 들어 기준이 되는 값, 즉 html 태그의 font-size 값이 이 16px 라면 2rem 은 32px 을 의미합니다.

html { font-size: 16px; }

div {

font-size: 1.5rem; /* 24px */

margin: 2rem /* 32px */

padding: 1.25rem /* 20px */

}

em

em 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다.

예를 들어 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em 은 32px 을 의미합니다.

div { font-size: 16px; }

div {

font-size: 1.5em; /* 24px */

margin: 2em /* 32px */

padding: 1.25em /* 20px */

}

차이점

차이점을 간단하게 이야기 하자면 rem 이과 em 은 기준이 되는 값이 다르다는 것입니다. rem 은 최상위 태그의 font-size 값이 기준이며, em 은 현재 요소의 font-size 값이 기준이라는 것입니다. 만약 em 을 사용해 스타일을 지정한 요소에 따로 font-size 값이 지정되지 않았다면, 해당 요소는 부모요소로 부터 font-size 값을 상속(inherit) 받을 것이며, em 은 그 상속 받은 값을 기준으로 삼게 됩니다.

예를 들어 이와 같은 경우를 생각 해봅시다. 최상위에 html 태그가 있고, 그 밑에 body 태그로 본문 영역이 표시 되며, container 라는 클래스를 가진 div 요소 하위에 content1 과 content2 라는 클래스의 div 요소가 자리 잡고 있습니다.

html { font-size: 16px; }

body { font-size: 2em; }

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

div.content1 { font-size: 2rem; }

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

이 경우 content1 의 font-size 는 32px 이지만, content2 의 font-size 는 16px * 2 * 2 * 2 이므로 128px 로 지정됩니다.

---

폰트 크기를 지정하거나(px) 꼭 em 단위를 써야하는곳이 아니면 rem단위 사용을 권장한다.

rem이 반응형 홈페이지에 잘 사용되는 이유는 

미디어쿼리로 css를 처리할때 브레이크 포인트에서 html의 폰트사이즈만 변경 해주면 하위 rem단위의 크기가 전부 변경 되기 때문에 편리합니다.

참조: http://triki.net/prgm/3250