em 단위와 rem 단위의 차이점
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;
}data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS em, rem 차이점 예제1"
data-slug-hash="OJXMKJO"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 330px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
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;
}data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS em, rem 차이점 예제2"
data-slug-hash="BazjXyJ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 330px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
최상위 요소, 즉 html 요소의 크기가 16px이므로,
그것의 두 배인 32px가 되는 것입니다.
body 요소의 크기는 영향을 미치지 않습니다.
참고:
html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자
크기입니다. 보통 16px입니다.