lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!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>
    <div class="card shadow">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 1</h2>
      <p class="card-content">기본 카드</p>
    </div>

    <div class="card highlight shadow">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 2</h2>
      <p class="card-content">기본 카드</p>
    </div>

    <div class="card highlight">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 3</h2>
      <p class="card-content">기본 카드</p>
    </div>
  </body>
</html>

# 클래스(Class)

## 스타일을 재사용하는 방법

CSS `클래스(Class)`는 HTML 요소에 스타일을 적용하거나 JavaScript로 요소를 선택할 때 사용하는 **식별자**(Selector)입니다.

주로 여러 HTML 요소에 동일한 CSS 스타일을 적용할 때 사용합니다.

<br />

**클래스(Class) 주요 특징**

- 클래스는 CSS에서 `.`으로 시작하는 이름으로 정의되며, 여러 요소에 동일한 클래스 이름을 지정하여 스타일 공유

- 하나의 HTML 요소에 여러 클래스 적용 가능

- 클래스 이름은 공백 없이 영문자, 숫자, 하이픈(`-`), 밑줄(`_`)로 정의

<br />

예를 들어 아래 CSS는 배경색을 노란색, 글자 색상을 파란색으로 만드는 CSS 클래스입니다.

```css title="highlighted CSS 클래스"
.highlighted {
  background-color: yellow;
  color: blue;
}
```

<br />

이 클래스는 HTML 문서에 아래와 같이 적용해 h1, h2, p 태그에 동일한 스타일을 적용할 수 있습니다.

```html title="CSS 클래스 적용"
<h1 class="highlighted">Highlighted H1</h1>
<h2 class="highlighted">Highlighted H2</h2>
<p class="highlighted">Highlighted Paragraph 1</p>
<p class="highlighted">Highlighted Paragraph 2</p>
```

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.

모든 카드의 배경색(background-color)이 코랄(coral, 산호색)으로 적용됩니다.