HTML id와 class 차이점

기능상 차이는 없다. 중복이 가능하냐 마느냐 이게 핵심이다.

 

css에서 하나의 값을 여러 html 요소에 적용하고 싶다면 하나의 class로 엮으면 된다.

 

반면에 확실한 유일성이 필요하다면 id로 확실한 구분을 지어준다.

 

간단한 예시를 보면 쉽게 이해가 가능하다.

 

<div class="name" id="first-name">first-name</div>
<div class="name" id="last-name">last-name</div>

.name {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

#last-name {
  font-size: 16px
}

#first-name {
  font-size: 24px
}

 

name class에 공통 css를 적용하고, -name id에 개별 css를 적용했다.

 

둘의 공통점과 차이점이 명확하게 보인다.