CSS에서 em 단위 소개

em 단위는 부모 요소의 크기에 대한 백분율로 글꼴 크기를 지정할 수 있게 합니다. 예제를 통해 살펴보겠습니다.

중첩된 태그가 다음과 같다고 가정해 보겠습니다:

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

div에 글꼴 크기를 설정해 보겠습니다:

div {
	font-size: 20px;
}

그리고 단락(paragraph)에 2em 크기를 지정합니다. 이 값은 부모 요소 글꼴 크기의 두 배에 해당합니다:

p {
	font-size: 2em; /* 40px에 해당 */
}

이제 단락에 0.5em 크기를 지정해 보겠습니다. 이 값은 부모 요소 글꼴 크기의 절반에 해당합니다:

p {
	font-size: 0.5em; /* 10px에 해당 */
}

1em 값을 사용하면 단락의 글꼴 크기가 부모 div와 동일해집니다:

p {
	font-size: 1em; /* 20px에 해당 */
}

실습 문제

다음 HTML 코드에 대해 문제를 해결해 보겠습니다:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

다음 코드를 실행한 결과, li 태그의 글꼴 크기가 px로 얼마가 되는지 결정하세요:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

다음 코드를 실행한 결과, li 태그의 글꼴 크기가 px로 얼마가 되는지 결정하세요:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

다음 코드를 실행한 결과, li 태그의 글꼴 크기가 px로 얼마가 되는지 결정하세요:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}