em / rem | Notion

<aside> 💡 em / rem의 차이를 알아보자

</aside>

<body>
	<div class="container">
		<div class="em">
			<p>em</p>
		</div>
		<div class="rem">
			<p>rem</p>
		</div>
	</div>
</body>

body{font-size: 15px;}

.em{font-size:20px;}
.em p{font-size:1em;}

.rem p{font-size:2rem;}

em의 단위는 상속된 부모의 폰트크기를 가져오는 것이다.

body의 font-size 속성이 주어졌을때 따로 크기를 지정하지않는다면

모든 태그들의 font-size는 15px로 고정될 것 이다.

em단위 같은경우엔 em이라는 박스에 20px이라고 지정이 되어있고

p태그는 그럼 1em = 20px이 된다.

0.5em = 10px; 부모 크기속성에 따라 달라지기때문에 헷갈리지 않도록 신경써서 작업해야한다.

rem의 단위는 최상단 부모, 즉 root의 폰트크기를 가져온다.

여기서 최상단부모는 root = body이므로