CSS의 rem 단위

em 단위는 항상 편리하지는 않습니다. 문제는 한 태그의 글꼴 크기를 변경하면, 그 크기에 상대적으로 자신의 크기를 계산하는 모든 하위 태그들의 크기도 변경된다는 점입니다.

그래서 rem 단위가 도입되었습니다. 이 단위의 값은 항상 html 태그에 지정된 글꼴 크기를 기준으로 계산됩니다.

알다시피, 기본값은 16px입니다:

html {
	font-size: 16px;
}

예제를 통해 살펴보겠습니다. 다음과 같은 태그들이 있다고 가정해 봅시다:

<div>
	<p>
		text
	</p>
</div>

이제 rem 단위로 크기를 지정해 보겠습니다:

div {
	font-size: 2rem; /* 32px에 해당 */
}
p {
	font-size: 2rem; /* 32px에 해당 */
	margin: 2rem;    /* 32px에 해당 */
}

다음은 문제를 풀어볼 HTML 코드입니다:

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

픽셀 단위로 지정된 모든 값을 rem 단위로 다시 작성하세요:

main {
	margin: 64px auto 32px;
}

h1 {
	font-size: 32px;
}
section {
	font-size: 16px;
	margin-bottom: 32px;
}
h2 {
	font-size: 24px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
	margin-bottom: 12px;
}