언제 class를 쓰고 언제 id를 쓰는지

[html]

언제 class를 쓰고 언제 id를 쓰는지 아주 쉽게 가르쳐 줘

 

class와 id는 둘 다 HTML 요소에 스타일이나 스크립트 적용을 위해 사용되는 속성입니다. 그러나 그 용도와 사용 방법은 약간 다릅니다. 간단히 설명드리겠습니다:

 

1. class: `class` 속성은 하나의 HTML 요소에 여러 개의 클래스를 지정할 수 있으며, 동일한 클래스는 여러 요소에 적용할 수 있습니다. `class` 속성은 같은 스타일이나 동작을 여러 요소들에 적용하고 싶을 때 사용합니다. 예를 들어, 같은 스타일을 가진 여러 개의 버튼이나 목록 항목들에 동일한 클래스를 지정하여 스타일링을 통일할 수 있습니다.

```html
<button class="primary-button">확인</button>
<button class="primary-button">취소</button>
```

```css
.primary-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}
```

2. id: `id` 속성은 HTML 문서 전체에서 유일해야 합니다. 즉, 한 페이지에 같은 `id`를 가진 요소는 오직 하나만 존재해야 합니다. `id`는 주로 JavaScript에서 특정 요소를 고유하게 식별하고 조작할 때 사용됩니다. 스타일링을 위해서도 사용할 수 있지만, 보통 `class`보다는 특정 요소를 정확히 선택하여 스타일링해야 할 때 사용됩니다.

```html
<div id="header">헤더 영역</div>
```

```css
#header {
  background-color: #f2f2f2;
  height: 80px;
  padding: 16px;
  font-size: 24px;
}
```

간단히 정리하면, `class`는 여러 요소들에 공통된 스타일이나 동작을 적용할 때, `id`는 특정 요소를 유일하게 식별하여 조작 또는 스타일링할 때 사용합니다. `class`는 여러 번 반복해서 사용할 수 있지만, `id`는 유일한 값이어야 합니다.