공부 노트

em : 부모 기준

rem : root 기준 

font-size: 16px; == 1em == 100%

<div class="box-em">
 <h1>em : 상대적인 폰트(부모기준으로 상대적)</h1>
 <p>
	곧 너의 뭇 방황하였으며, 봄바람이다. 아름답고 이상의 끝에 것이다. 
    인도하겠다는 불어 피가 인간은 불어 풀이 봄바람이다. 
    얼음 청춘 심장의 없으면, 날카로우나 원대하고, 끝에 피다. 
    있을 청춘의 무엇을 돋고, 과실이 교향악이다. 어디 쓸쓸한 
    발휘하기 위하여 끝에 거선의 구할 아니다. 우는 것이 이상을 따뜻한 
    천고에 투명하되 사막이다. 목숨이 인도하겠다는 사는가 쓸쓸하랴? 
    얼음과 않는 없으면, 주며, 때문이다.
 </p>
</div>

<div class="box-rem">
 <h1>rem : 가장 상위요소(html)기준</h1>
 <p>
	곧 너의 뭇 방황하였으며, 봄바람이다. 아름답고 이상의 끝에 것이다. 
    인도하겠다는 불어 피가 인간은 불어 풀이 봄바람이다. 
    얼음 청춘 심장의 없으면, 날카로우나 원대하고, 끝에 피다. 
    있을 청춘의 무엇을 돋고, 과실이 교향악이다. 어디 쓸쓸한 
    발휘하기 위하여 끝에 거선의 구할 아니다. 우는 것이 이상을 따뜻한 
    천고에 투명하되 사막이다. 목숨이 인도하겠다는 사는가 쓸쓸하랴? 
    얼음과 않는 없으면, 주며, 때문이다.
 </p>
</div>

body {
 font-size: 16px;
 }
.box-em {
 font-size: 20px;
}
.box-em p {
 /* 1em => 부모(.box-em)이 fz20 이기때문에 20px이다. */
 font-size: 1em;
			
 /* 30px */
 line-height: 1.5em;
}

.box-rem {
 /* root가 16px, 16*1.25 == 20px */
 font-size: 1.25rem;
}

바디 : 16px

div.box-em : 20px 

    div > p : 1em (부모 20픽셀기준으로 p는 20픽셀이다)

div.box-rem : 1.25rem

( 최상위 요소(html)기준으로 16*1.25 == 20px)