rem, em css 요소
CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정한다.
em - 상위 요소 기준
em 단위는 상위 요소 크기의 몇 배인지로 크기를 정한다. 예를 들어
font-size: 1.5em;은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 16px; }
body { font-size: 1.5em; }
.a { font-size: 2.0em; }
</style>
</head>
<body>
<p class="a">Lorem Ipsum Dolor</p>
</body>
</html>html 요소의 크기는 16px, body 요소의 크기는 상위 요소인 html 요소의 크기의 1.5배인 24px, 문단 요소의 크기는 상위 요소인 body 요소의 크기의 2배인 48px가 된다.
16 × 1.5 × 2 = 48
rem - html 요소 기준
rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정한다. 위 예제에서
.a { font-size: 2.0em; }에서 단위를 rem으로 바꾸면
.a { font-size: 2.0rem; }글자 크기가 32px가 된다.
html 요소의 크기가 16px이므로, 그것의 두 배인 32px가 되는 것이다.
16 × 2 = 32
html 요소와 문단 요소 사이에 있는 body 요소의 크기는 영향을 미치지 않는다.
참고
- html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기이다. 보통은 16px.
