class vs id

css를 작성 할 때 사용되는 키워드가 바로 class와 id 이다. 두 키워드 모두 HTML 요소에 css 효과를 입힐 수 있지만, 어떤 경우에 class를, 또는 id 를 사용 해야 하는지 키워드 간의 차이점을 알아보자.

먼저 id란 요소의 고유한 식별자로 문서 내에서 한번만 사용 해야 하며 (같은 id는,존재해선 안된다.), class는 여러 요소에 동일하게 적용이 가능하다. 또한 css 적용 시, id 가 class 보다 우선순위에 위치한다.

따라서, 여러 컴포넌트 에서 동일한 스타일을 입혀야 할 경우, class 를 사용하여 css를 정의하며, header, footer 등 문서 내의 고유한 요소에 스타일을 입혀야 할 경우, id 를 사용한다.

/* id */
#header {
  color: blue;
  width: 80%;
}
/* class */
.searchInput {
  width: 100px;
  padding: 5px;
}