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 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>
  </head>

  <body>
    <h1>제목: CSS 기본 구조 학습</h1>
    <p>이 문장은 CSS의 기본 구조에 대해 알아보는 예제 문장입니다.</p>
    <p class="highlight">선택자, 속성, 값</p>
  </body>
</html>

# CSS 기본 구조

## 기본 구조: 선택자, 속성, 값

CSS는 아래와 같이 구성됩니다.

```css title="CSS 기본 구조"
선택자 {
  속성: 값;
}
```

프린터가 좌표마다 지정된 색상으로 컬러를 인쇄하는 것처럼, CSS는 `어느 HTML 요소(선택자)`에 `어떠한 것(속성)`을 `어떻게(값)` 스타일링할지 정하는 규칙이 있습니다.

- **선택자**: 스타일을 정의할 HTML 요소 선택

- **속성과 값**: 선택한 요소에 어떤 속성을(예: 색상, 글자 크기), 어떻게 적용할지(예: red, 16px) 지정

예를 들어 앞서 정의한 h1 태그에 빨간색을 적용하려면, 아래와 같은 CSS를 작성합니다.

```css title="CSS"
h1 {
  color: red;
}
```

여기서 h1은 `선택자`, color는 `속성`, red는 `값`입니다.

**값** 끝에는 항상 세미콜론`(;)`을 붙여, 해당 줄(Line)이 끝났다는 것을 알려주어야 합니다.