[CSS] em, rem

em

부모 요소의 폰트 사이즈를 기준으로한 상대적인 수치이다.

em 단위는 보통 줄간격에 사용한다. 부모요소의 폰트사이즈를 기준으로한다.
정적으로 했을 경우 부모요소의 폰트사이즈가 변경되면 line-height도 조절해줘야한다.

.box-em {
font-size: 18px;
}
.box-em p {
font-size: 2em; /* 부모요소의 폰트사이즈는 20px 이므로 1em = 20px 40px */
line-height: 1.2em;
}

rem

최상위 태그인 html 의 폰트 사이즈를 기준으로 한 상대적인 수치이다.

주로 반응형 웹을 제작할 때 사용한다.

html {
font-size: 20px;
}
.box-rem {
font-size: 40px;
}
.box-rem p {
font-size: 0.5rem; /* html 의 폰트사이즈 20px 이므로 10px이 된다. */
}