폰트 크기

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 19번째.

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

글꼴 크기를 지정하는 데 사용되는 몇 가지 일반적인 단위는 다음과 같습니다:

Pixels (px): 픽셀 단위로 글꼴 크기를 지정하는 절대 단위입니다. 이것은 글꼴 크기를 설정하는 데 가장 간단하고 일반적으로 사용되는 단위입니다.

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

Rems (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를 32px로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 1.2em으로 설정하세요.
<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 120%로 설정하세요.

치트 시트

font-size 속성은 HTML 요소 내 텍스트의 크기를 조절합니다.

글꼴 크기에 사용되는 일반적인 단위:

픽셀 (px): 글꼴 크기를 픽셀 단위로 지정하는 절대 단위
Ems (em): 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위
Rems (rem): 루트 요소의 글꼴 크기를 기준으로 하는 상대 단위
백분율 (%): 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

직접 해보기

<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>