rem과 em의 차이

1. rem

기준값의 배수로 표현한 크기.
기준값은 최상위 요소에 지정된 font-size이다
대체로 html, body에 기준값이 선언된다

html { font-size : 16px }

div.container{
	font-size : 2rem // 32px
}

div.container > div.contents {
	font-size : 2rem // 32px
}

최상위 요소인 html에 font-size 기준값이 16px로 선언되어 있고
하위 요소에 선언된 2rem은 16px * 2 = 32px의 폰트 사이즈를 가지게 된다

2. em

em도 rem과 동일하게 기준값의 배수로 표현하는 단위이다.
rem과 차이점은 기준값이 최상위 요소가 아닌 현재 요소에 선언된다는 점이다.

div { font-size: 16px; }
div { 
	font-size: 2em; // 32px
}

 

단 현재 요소에 기준값이 px로 선언되어 있지 않다면
부모 요소로 부터 기준값을 상속받는다

html { font-size: 16px; }

body { font-size: 2em } // 16 * 2 = 32px

main { font-size: 2em } // 16 * 2 * 2 = 62px

div.container { font-size: 2em } // 16 * 2 * 2 * 2 = 128px