HTML Class , Id

Html 속성 중 Class와 id는 무엇일까요?

고유한 값인 id와 중복 사용이 가능한 Class에 대해 공부합니다.

 

ID

 

고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.

고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 CSS에서 활용할 수 있습니다.

 

Class

하나의 HTML 문서 안에 중복해서 사용 가능합니다 Id와 차이점입니다.

하나의 태그에 여러 개의 다른 Class 이름을 공백 기준으로 나열할 수 있습니다.

<div class="divOne divTwo"></div>

홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

다만 팀원과의 약속이나 회사에서 약속에 따라 id와 class를 같이 사용하거나 class만을 사용할 수 도 있습니다.

 

CLASS , ID의 이름을 짓는 규칙은 없지만 변수명을 정하는 것처럼 신중히 정해야 합니다.

 

data로 시작하는 속성 또한 html5가 되면서 data를 저장할 수 있는 기능이 추가되었습니다.

JS에서 dataset객체를 이용해 data-뒤에 설정한 객체 이름으로 속성 값을 호출/변경할 수 있습니다.

cCSS 또한 특성 data- 속성 값 선택자를 통해 스타일 변경이 가능합니다.

다만 접근을 따로 할 수 없으므로 접근이 필요한 정보는 넣지 않습니다.

또한 data-로 저장했을 경우 화면에 보이지 않고 데이터만 저장됩니다.

 

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

css에서 접근할 때는 이렇게 접근합니다.

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}