[CSS] class, id 차이

중복 사용 여부

• class: 여러 요소에 중복으로 사용할 수 있습니다. 즉, 동일한 class를 여러 요소에 적용할 수 있어, 그룹화된 여러 요소에 동일한 스타일을 적용할 때 유용합니다.

• id: HTML 문서에서 고유해야 합니다. 즉, 같은 id를 가진 요소는 문서 내에서 하나만 존재해야 합니다. 특정한 하나의 요소에만 스타일을 적용하거나 스크립트를 통해 조작할 때 주로 사용됩니다.

선택자 우선순위

id는 class보다 높은 우선순위를 가집니다. 따라서 같은 속성에 대해 class와 id가 동시에 적용된 경우, id로 지정된 스타일이 적용됩니다.

우선순위: id 선택자(#) > class 선택자(.) > 요소 선택자

선택자 표기법

• class: 요소에 class 속성을 주고, CSS에서 . (점)으로 선택자를 지정합니다.

<div class="example"></div>

.example {
  color: red;
}

• id: 요소에 id 속성을 주고, CSS에서 # (샵)으로 선택자를 지정합니다.

<div id="unique"></div>

#unique {
  color: blue;
}

정리

• class: 반복적으로 여러 요소에 동일한 스타일을 적용해야 할 때 사용합니다. 예를 들어, 여러 버튼이나 텍스트에 동일한 디자인을 적용할 때 유용합니다.

• id: 고유한 요소에만 스타일이나 동작을 지정할 때 사용합니다. 예를 들어, 특정한 레이아웃 섹션이나 특정 버튼에 대해 구체적인 스타일을 적용할 때 유용합니다.