lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webLightBasicChapter2Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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>CSS 예시</title>

    
    <link rel="stylesheet" type="text/css" href="example.css" />

    
    <style>
      .internal-style {
        
      }
    </style>
  </head>
  <body>
    <h1 class="external-style">외부 CSS 스타일 예시</h1>
    <h2 class="internal-style">내부 CSS 스타일 예시</h2>
    <p style="color:green;">인라인 CSS 스타일 예시</p>
  </body>
</html>

# CSS를 불러오는 방법

**1. 외부 CSS (External CSS)**

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

- 코드 예시:
  ```html title="HTML 문서에 외부 CSS 파일을 연결"
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  ```
  `styles.css`라는 별도의 파일 안에 스타일 코드가 들어있습니다.

<br />

**2. 내부 CSS (Internal CSS)**

- HTML 문서의 `<head>` 섹션에 `<style>` 태그를 사용하여 스타일을 정의하는 방식입니다. 이렇게 정의된 CSS는 해당 HTML 문서 내에서만 스타일이 적용됩니다.

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

<br />

**3. 인라인 CSS (Inline CSS)**

- HTML 요소에 직접 스타일을 적용하는 방식입니다. 정의한 스타일은 해당 요소에만 적용됩니다.

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

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

<br />

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