lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webLightBasicChapter2Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter3Title

# CSS를 불러오는 방법

정의한 CSS 코드를 HTML 문서에 적용하는 방법에는 크게 3가지가 있습니다.

<br />

## 1. 외부 CSS로 불러오기

CSS 코드를 별도의 파일로 만들어 해당 파일을 HTML 문서에 연결하는 방식입니다.

```html title="HTML 문서에 외부 CSS 파일을 연결"
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
```

`styles.css`라는 별도의 파일 안에 스타일 코드를 작성하고, HTML 문서에 `<link>` 태그를 사용하여 CSS 파일을 연결합니다.

<br />

## 2. 내부 CSS로 정의하기

HTML 문서의 `<head>` 섹션에 `<style>` 태그를 사용하여 스타일을 정의하는 방식입니다.

이렇게 정의된 CSS는 해당 HTML 문서 내에서만 스타일이 적용됩니다.

```html title="HTML 문서 내부에 CSS 정의"
<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>
```

<br />

## 3. 인라인 CSS로 적용하기

HTML 요소에 직접 스타일을 적용하는 방식입니다.

정의한 스타일은 해당 요소에만 적용됩니다.

```html title="HTML 요소에 직접 스타일 적용"
<p style="color:red;">이 문장은 빨간색으로 표시됩니다.</p>
```

3가지 방법 중 어떤 방법을 선택할지는 프로젝트의 요구 사항, 유지 보수의 용이성 등 다양한 요인을 고려하여 결정합니다.

<br />

코드에 강조된 부분을 따라 입력해 보세요.

내부 CSS는 HTML 문서의 `<head>` 섹션에 `<style>` 태그를 사용하여 CSS를 정의하는 방식입니다. 이는 해당 HTML 문서에만 적용되므로, 다른 문서에는 영향을 주지 않습니다.

### 다음 중 빈칸에 들어갈 가장 적절한 것은 무엇일까요?