lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# 글자 크기(font-size)

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

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

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

<br />

## px (픽셀)

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

```css title="px 단위 사용 예시"
p {
  font-size: 16px;
}
```

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

<br />

## em

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

예시:

```css title="em 단위 사용 예시"
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="rem 단위 사용 예시"
html {
  font-size: 16px;
}

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

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

<br />

## vw (Viewport Width)

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

```css title="vw 단위 사용 예시"
p {
  font-size: 5vw;
}
```

화면의 너비가 1000px일 경우, `p` 태그의 글꼴 크기는 50px가 됩니다.

화면의 크기가 바뀔 때마다 글꼴 크기도 함께 변하게 됩니다.

vw는 'Viewport Width'의 약자로, 화면의 너비에 따라 글자 크기를 조절하는 단위입니다. 예를 들어, 화면의 너비가 1000px일 때 5vw는 50px가 됩니다. 따라서 vw를 사용하면 반응형 디자인에 유용합니다.

### 다음 빈칸에 들어갈 CSS 단위는 무엇인가요?