대표적으로 많이 쓰는 px(픽셀)단위는 절대적인 단위로, 어떤 환경에서든 같은 크기로 나타낸다. 그에 반해 이 em과 rem은 각각의 기준이 있고 그 기준에 따라 폰트의 크기가 바뀐다.
px와 사용방법은 같으며 위에서 말했던 기준이란 부모 요소를 기준으로 한다.
부모 요소의 크기(px)를 기준으로 1em은 부모요소의 크기와 똑같고 배수 형태로 사용된다.
em과 마찬가지로 사용방법은 px과 같으며, rem의 기준은 부모요소가 아닌 가장 상위의 요소, 즉 html의 font-size를 기준으로 변한다.
참고로
font-size
는 16px이 기본값이다.
font-size: 16px;
= font-size: 1em;
= font-size: 1rem;
= font-size: 100%;
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 사이즈 px rm rem</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="container">
<header>
<h1>폰트 사이즈</h1>
<p>px | em | rem</p>
</header>
<section>
<div class="box-em">
<h1>em</h1>
<p>
튼튼하며, 같은 투명하되 그것은 듣는다. 얼음 쓸쓸한 피어나는 사막이다. 끝까지 피어나기 역사를 노년에게서 주는 못하다 수 쓸쓸하랴? 품고 같이 싸인 이는 사는가 그들은 웅대한 생명을 듣는다. 속에 가치를 역사를 수 보라. 얼음과 뜨고, 일월과 청춘의 든 봄바람이다. 풍부하게 어디 안고, 별과 칼이다. 들어 내는 찾아 청춘의 끓는 가는 이상을 전인 군영과 때문이다. 것이 두기 더운지라 불어 있으랴? 장식하는 별과 곳이 속에서 든 구하기 쓸쓸하랴?
</p>
</div>
<div class="box-rem">
<h1>rem</h1>
<p>
튼튼하며, 같은 투명하되 그것은 듣는다. 얼음 쓸쓸한 피어나는 사막이다. 끝까지 피어나기 역사를 노년에게서 주는 못하다 수 쓸쓸하랴? 품고 같이 싸인 이는 사는가 그들은 웅대한 생명을 듣는다. 속에 가치를 역사를 수 보라. 얼음과 뜨고, 일월과 청춘의 든 봄바람이다. 풍부하게 어디 안고, 별과 칼이다. 들어 내는 찾아 청춘의 끓는 가는 이상을 전인 군영과 때문이다. 것이 두기 더운지라 불어 있으랴? 장식하는 별과 곳이 속에서 든 구하기 쓸쓸하랴?
</p>
</div>
</section>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css2?
family=Noto+Sans+KR:wght@100;300;500;700;900&display=swap');
html{
font-size: 20px;
}
body{
font-family: 'Noto Sans KR', sans-serif;
}
.box-em{
font-size: 20px;
}
.box-em p {
/* body태그가 아닌 box-em을 기준으로 생각해서 40px가 된다 */
font-size: 1em;
line-height: 1.5em;
}
.box-rem{
font-size: 2em;
}
.box-rem p{
font-size: 1rem;
}