반응형
CSS의 길이 단위 중에서 em과 rem은 상대적인 크기를 결정하는데 사용된다.
em - 상위 요소 크기의 몇 배인지를 정하는 단위
font-size: 2em;은 나의 상위 엘리먼트의 font-size보다 2배 큰 것으로 지정하겠다라는 의미이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 20px; }
body { font-size: 1.5em; }
.a { font-size: 2.0em; }
</style>
</head>
<body>
<p class="a">Crocus</p>
</body>
</html>해당 코드에서 보면
html의 font-size가 20px이면
body는 상위가 html이니 1.5배인 30px가 될 것이고
p 엘리먼트는 body의 2배인 60px가 될 것이다.
rem - html 요소 크기의 몇 배인지를 정하는 단위
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 20px; }
body { font-size: 1.5rem; }
.a { font-size: 2.0rem; }
</style>
</head>
<body>
<p class="a">Crocus</p>
</body>
</html>
해당 코드에서 보면
html의 font-size가 20px이면
body는 html의 1.5배인 30px가 될 것이고
p 엘리먼트는 html의 2배인 40px가 될 것이다.
반응형