글꼴 크기

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 19번째.

CSS에서 font-size 속성은 HTML 요소 내 텍스트의 크기를 제어하는 데 사용됩니다.

다음은 글꼴 크기를 지정할 때 사용하는 일반적인 단위입니다.

픽셀(px): 글꼴 크기를 픽셀 단위로 지정하는 절대 단위입니다. 글꼴 크기를 설정할 때 가장 간단하고 흔히 사용되는 단위입니다.

엠(em): 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. 예를 들어, 부모 요소의 글꼴 크기가 16px이면 1em은 16px이고, 2em은 32px이며, 이런 식으로 이어집니다.

렘(rem): 루트 요소(<html>)의 글꼴 크기를 기준으로 하는 상대 단위입니다. 이 단위는 부모 요소의 글꼴 크기에 영향을 받지 않으므로 문서 전체에서 더 일관성을 제공합니다.

백분율 (%): em과 비슷하게 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. 예를 들어 부모 요소의 글꼴 크기가 16px이면 100%는 16px이고, 150%는 24px입니다.

예를 들면:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

이 예시에서는 모든 <p>(문단) 요소의 글꼴 크기를 16px로 설정하고, 모든 <h1> 제목을 2.5em으로 설정합니다(부모 요소의 글꼴 크기를 기준으로 함). 문서의 기본 글꼴 크기는 1.4rem으로 설정하고, small-text 클래스를 가진 모든 요소의 글꼴 크기는 80%로 설정합니다(부모 요소의 글꼴 크기를 기준으로 함).

챌린지

쉬움

제목(<h1>), 단락(<p>), 분할 영역(<div>)이 있는 HTML 문서가 주어집니다. font-size 속성을 사용하여 이러한 요소의 스타일을 지정하세요. 다음 단계를 따르세요.

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 40px로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 1.2em으로 설정하세요.
<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 120%로 설정하세요.

직접 해보기

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>