rem, em 언제써야할까

참고 블로그 http://triki.net/prgm/3250

오늘 기존 프로젝트 말고 새로운 사이트(원 페이지) 를 맡기로 했다! 뭐 별다른 기능이 있는 것도 아니어서 그냥 처음부터 기본셋팅 + 반응형 퍼블리싱 한다고 생각하고 하는데,

내가 퍼블리싱할 때 크기 단위를 px로 하는 버릇이 남아있어서 이번에 그걸 고치고자 웬만한 건 다 가변단위인 rem, em으로 썼다.

그런데 집에 와서 보니! 두둔 박스의 크기는 % 나 v*를 사용해서 조절하고 폰트사이즈 같은 경우에 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 은 그 상속 받은 값을 기준으로 삼게 됩니다.