em, rem
CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정하는 단위입니다.
em - 상위 요소 기준
em 단위는 상위 요소 크기의 몇 배인지 크기를 정합니다.
예를 들어
font-size: 1.5em;
은 글자 크기를 상위 요소 크기의 1.5 배로 하겠다는 뜻입니다.
간단한 예제를 만들어보겠습니다.
<p class="a">Lorem Ipsum Dolor</p>
html {
font-size: 16px;
}
body {
font-size: 1.5em;
}
.a {
font-size: 2.0em;
}
html 요소의 크기는 16px,
body 요소의 크기는 html 요소의 크기의 1.5배인 24px,
a 요소의 크기는 body 요소의 크기의 2배인 48px가 됩니다.
rem - html 요소 기준
rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다.
다음 예제는 글자 크기가 32px가 됩니다.
<p class="b">Lorem Ipsum Dolor</p>
html {
font-size: 16px;
}
body {
font-size: 1.5em;
}
.b {
font-size: 2.0rem;
}
최상위 요소, 즉 html 요소의 크기가 16px이므로,
그것의 두 배인 32px가 되는 것입니다.
body 요소의 크기는 영향을 미치지 않습니다.
참고:
html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자
크기입니다. 보통 16px입니다.