글꼴 크기

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

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

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

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

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

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

백분율 (%): 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>(paragraph) 요소의 font size가 16px로 설정되고, 모든 <h1> heading은 2.5em으로 설정됩니다(이는 부모 요소의 font size를 기준으로 합니다). 문서의 기본 font size는 1.4rem으로 설정되며, small-text 클래스를 가진 모든 요소의 font size는 80%으로 설정됩니다(이는 부모 요소의 font size를 기준으로 합니다).

챌린지

쉬움

<h1> 제목, <p> 단락, <div> division이 포함된 HTML 문서가 주어집니다. 여러분의 과제는 font-size 속성을 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 다음 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 32px로 설정하세요.
<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>