(CSS) % vs em vs rem

%

css에서의 단위로

부모요소를 기반으로 값을 계산한다.

<main> /* 부모 */
	<div>안녕</div> /* 자식 */
</main>

예로 div의 font-size 값을 10%로 해두었으면 

div의 부모 요소인 main의 font-size 값에서 10%를 한다.

%는 해당 요소의 부모요소의 값을 기준으로 한다.

em

1em = 100%

0.1em = 10%

동적인 크기를 정할 수 있는 단위 중 하나로 1em은 100%와 같다.

위의 %와 다른 점은

em은 폰트 사이즈를 기반으로 한다.

 

em은 부모 요소의 폰트 사이즈에서 %를 해서 값을 부여한다.

 

rem

1rem = 100%

0.1rem = 10%

em과 동일하게 동적으로 크기를 지정할 수 있는 단위이며

폰트 사이즈를 기반으로 한다.

 

em은 부모 요소의 폰트 사이즈라면

rem은 최상위 요소의 폰트 사이즈를 기반으로 한다.

 

최상위 요소에 아무 설정이 없다면 브라우저의 폰트 사이즈를 기준으로 한다.