[HTML] id와 class의 차이점

❓ id와 class의 차이는?

---

HTML로 웹 페이지 구조를 짜다 보면 id와 class 속성을 자주 사용하게 된다. 그렇다면 이 두 속성의 차이점은 뭘까?

결론부터 이야기하자면, id는 고유한 속성으로 HTML 문서 내에서 하나의 요소에만 사용이 된다. 즉 중복 사용이 불가하다.
class는 여러 요소에 사용이 가능하기 때문에 중복 사용이 가능하다. 한 페이지 내에서 스타일이 반복될 때 이 class 속성을 사용할 수 있다.

사진 출처

위의 예시를 보면 'post'라는 이름의 class가 중복으로 선언되어 있는 것을 볼 수 있다. 보통 포스트들은 같은 디자인을 가지기 때문에 위와 같은 형태로 사용될 수 있다.
id 속성은 한 번만 사용이 가능하기 때문에 위의 예시처럼 header, side-bar, footer, content(container) 등과 같이 큰 구조 같은 경우에 id 속성을 부여하게 된다.

이건 실제로 네이버의 페이지 소스인데 위 예시처럼 header, container, footer가 id 속성으로 분류된 것을 볼 수 있다.

사용 방법은 아래와 같다.

<div id="card_list">
<p class="card_title"></p>
</div>

위와 같이 HTML 태그 내에 id, class 명을 선언해주고,

#card_list {

}

.card_title {

}

CSS에서는 id는 #id명, class는 .class명으로 선언을 해주면 된다.

그리고 여기서 한 가지 더 알아야 할 것이 있는데,

id 속성이 class 속성보다 우선시 된다.

예를 들자면, 같은 태그 내에 id와 class 속성을 모두 부여해보자.

<p id="intro" class="foo">Hello World!</p>

#intro { color: red }
.foo { color: blue }

각 속성에 다른 색상을 부여한다면, 이 텍스트의 색상은 빨간색이 된다. id가 class보다 우선된다는 특징 때문이다.

참고 사이트
스택오버플로우
언제나 감사합니다 스택오버플로우...