ID

• 고유한 속성으로 한 HTML 문서에 하나만 사용가능하다. 하지만 중복으로 사용하더라도 문제가 발생하지는 않는다. 개발자가 의식적으로 사용해야한다.
• 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다.

Class

• 하나의 HTML 문서 안에 중복해서 사용 가능하다.
• 하나의 태그에 여러개의 다른 class 이름을 공백을 기준을 나열할 수가 있다. ex) class="one two"
• 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 사용이 필수적이다.

생각해보기

• 좋은 class 이름을 짓는 규칙은 무엇일까요? id를 다른 웹사이트들에서는 어떻게 실제로 사용할까요? 어디에 id속성을 부여했는지 한번 찾아보세요.
  • BEM(block, element, modifier) 규칙이 있다. 기본 블럭명을 지은 후 블럭의 구성요소는 블럭명__구성요소명으로 짓고, 생긴게 조금 다르거나 등의 속성에 대한 요소는 블럭명__구성요소명--속성명형태로 명명한다.
• 요즘에는 data속성이라는 것도 자주 사용합니다. tag에 추가적인 데이터 정보를 표현하기 위함입니다. 이 부분도 같이 살펴보면 좋습니다.
  • 화면에 안보이게 글이나 추가 정보를 태그에 담아놓을 수 있다.