lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter4Title

<!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>HTML class 예시</title>
 <style>
 .alert {
 border: 1px solid red;
 padding: 10px;
 margin: 10px 0;
 background-color: #ffe6e6;
 }

 .large-text {
 font-size: 24px;
 font-weight: bold;
 }

 .info {
 border: 1px solid blue;
 padding: 10px;
 margin: 10px 0;
 background-color: #e6e6ff;
 }

 .small-text {
 font-size: 12px;
 }
 </style>
 </head>

 <body>
 경고 메시지
 큰 경고 메시지
 이 메시지는 정보 메시지에요!
 이 메시지는 작고, 파란색이에요!
 </body>
</html>

# 클래스(Class)

HTML `class`는 웹페이지의 다양한 HTML 요소들에 공통된 스타일과 동작을 적용하는 **식별자**입니다.

여러 요소에 동일한 이름의 `class`를 사용하면, 요소들을 동일한 방식으로 스타일링할 수 있습니다.

예를 들어 웹페이지에서 모든 경고 메시지 텍스트를 빨간색으로 표시하려면, 아래와 같이 경고 메시지에 공통으로 적용할 CSS를 `class`로 정의할 수 있습니다.

`class`는 아래와 같이 `.`을 붙여서 정의할 수 있습니다.

```css title="CSS 내 alert class 정의"
/* alert class 정의 */
.alert {
 color: red;
}
```

```html title="HTML 내 alert class 적용"
경고 메시지 1
경고 메시지 2
```

이렇게 `alert` class가 적용된 모든 HTML 요소들은 글자색이 빨간색으로 바뀝니다.

하나의 HTML 요소는 여러 `class`를 가질 수 있습니다.

각 `class`는 공백으로 구분되며, 여러 `class`에 속한 스타일과 동작들이 해당 HTML 요소에 복합적으로 적용됩니다.

```html title="HTML 내 여러 class 적용"
큰 경고 메시지
```

이런 식으로 HTML의 `class`를 활용하면, 웹페이지의 다양한 HTML 요소들에 효과적으로 스타일과 동작을 일관되게 적용할 수 있습니다.

HTML 요소는 여러 개의 class를 동시에 가질 수 있습니다. 각 class는 공백으로 구분되며, 여러 class에 속한 스타일과 동작들이 해당 HTML 요소에 복합적으로 적용됩니다.

### HTML 요소는 하나의 class만 가질 수 있다.