lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webLightPracticeChapter1Title

lesson12Title

webLightPracticeChapter2Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# CSS 속성으로 텍스트 스타일링하기

텍스트와 관련된 핵심적인 CSS 속성, `font-weight`, `font-size`, `line-height`에 대해 알아보겠습니다.

<br />

## font-weight

글자의 두께를 조정하는 데 사용합니다.

값으로는 `normal` (기본값), `bold` (굵게), `lighter` (더 얇게), 숫자(400, 700 등) 등이 사용됩니다.

<br />

## font-size

글자의 크기를 조정하는 데 사용합니다.

글자의 크기를 픽셀(px), 포인트(pt), 백분율(%) 등의 단위로 지정할 수 있습니다.

<br />

## line-height

스트가 여러 줄로 이루어진 경우 각 줄 사이의 간격을 조절합니다.

`line-height`를 비유하면, "한 줄의 텍스트가 얼마나 높게 올라가고 내려가는지"와 같은 개념입니다.

값으로는 픽셀(px), 숫자, 백분율(%) 등이 사용됩니다.

<br />

## 텍스트 스타일링 예시

예를 들어, 다음과 같은 CSS 코드는 글자의 두께를 굵게(bold)하게, 글자의 크기를 16픽셀(px)로, 행의 높이를 1.5배(line-height: 1.5)로 설정합니다.

```css title="CSS 텍스트 스타일링"
p {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
```

이렇게 설정하면 `<p>` 태그에 적용된 글자들이 굵게 보이고, 크기가 16픽셀로 나타나며, 행 간격이 1.5배로 설정됩니다.

이제 첫 번째 텍스트를 나타내는 `<h1>` 태그의 텍스트 스타일을 변경해보겠습니다.

```html title="h1 태그에 intro 클래스 적용"
<h1 class="intro">안녕하세요!</h1>
```

```css title="intro 클래스 정의"
.intro {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.8;
}
```

h1 태그 내 글자의 두께가 얇아지고, 글자 크기가 조금 더 작아진 것을 확인할 수 있습니다.