rem과 em 차이점

rem, em 두개 모두 css에서 크기를 나타내는 단위이지만 px처럼 절대적인 단위가 아니라 어떠한 기준을 둔 상대적인 단위이다.

 

두개의 차이는 무엇을 기준으로 두었냐이다.

rem은 최상위 클래스, 즉 html 클래스의 font-size가 기준이고 em은 적용되는 현재 클래스가 기준이다.

em의 경우 사용하는 클래스에 따로 font-size가 없다면 그의 상위 클래스의  font-size를 기준으로 삼는다.

 

예)

html{
	font-size: 20px;
}

div{
	font-size: 2rem;
}

/* 2rem = 40px */