lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>글꼴 크기 예제</title>
  </head>
  <body>
    <div class="container">
      <p class="pixel-text">이 텍스트는 16px로 설정되었습니다.</p>
      <div class="em-parent">
        <p class="em-text">이 텍스트는 부모 요소의 1.5em으로 설정되었습니다.</p>
      </div>
      <p class="rem-text">이 텍스트는 1.5rem으로 설정되었습니다.</p>
      <p class="vw-text">이 텍스트는 화면 너비의 5vw로 설정되었습니다.</p>
    </div>
  </body>
</html>

# 글자 크기(font-size)

CSS는 `font-size` 속성으로 글자 크기를 지정합니다.

글자 크기는 여러 단위로 조절할 수 있는데, 그중에서 `px`, `em`, `rem`, `vw`를 가장 널리 사용합니다.

앞에서 배운 길이 단위를 간단하게 복습해 보겠습니다.

<br />

## `px` (픽셀)

픽셀은 화면에 표시되는 기본 단위로, 화면을 구성하는 작은 점들을 의미합니다.

## 사용 예시

```css title="CSS"
p {
  font-size: 16px;
}
```

위 CSS로 문단(`p`)의 글자 크기가 16픽셀이 됩니다.

<br />

## `em`

`em`은 상대적인 단위로, 현재 요소의 부모 요소의 `font-size`를 기반으로 길이를 계산합니다.

예시:

```css title="CSS"
div {
  font-size: 16px;
}

p {
  font-size: 1.5em;
}
```

`p`는 `div`의 자식 요소이므로, `p` 태그의 글꼴 크기는 `div`의 1.5배, 즉 24px가 됩니다.

<br />

## `rem`

`rem`은 "Root EM"의 약자로, HTML 루트 요소의 `font-size`를 기반으로 합니다.

예시:

```css title="CSS"
html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}
```

`p` 태그의 글꼴 크기는 HTML 루트 요소의 1.5배, 즉 24px가 됩니다.

<br />

## `vw` (Viewport Width)

`vw`는 화면의 너비에 상대적인 단위입니다. `1vw`는 화면 너비의 1%를 의미합니다.

예시:

```css title="CSS"
p {
  font-size: 5vw;
}
```

화면의 너비가 1000px일 경우, `p` 태그의 글꼴 크기는 50px가 됩니다. 화면의 크기가 바뀔 때마다 글꼴 크기도 함께 변하게 됩니다.

글자 크기(font-size)

px (픽셀)

사용 예시

em

rem

vw (Viewport Width)

`px` (픽셀)

`em`

`rem`

`vw` (Viewport Width)