요약
id와 class는 HTML 공용 속성이며, id는 HTML문서에서 특정 요소에 고유한 값을 부여하는 속성이다.
class는 요소들을 그룹화하기 위해 사용하는 속성이다.
CSS에서는 id, class, tag 순서로 적용된다.
id는 “#id값”으로 표현하고, class는 “.class값”으로 표현한다.
id와 class
HTML의 모든 태그들이 갖고 있는 공용 속성(Global Attribute)이다.
id 속성
HTML 문서에서 각 요소들을 구분하기 위해 사용하는 속성
- id 값은 HTML 문서 내에서 고유한 값으로 부여되어야 한다.
- id 값은 중복이 불가능하다.
- CSS에서 id selector를 사용할 때, “#id값”으로 표현한다.
- JavaScript에서 HTML 요소를 선택할 때 getElementById를 통해 id 요소를 선택할 수 있다.
class 속성
HTML 문서에서 태그들을 그룹 지을 때 사용하는 속성
- 여러 태그 요소들에게 같은 class 값을 적용하여 하나의 그룹으로 표현할 때 사용한다.
- class 속성은 그룹화 하는 속성이기 때문에 중복이 가능하다.
- CSS에서 class selector를 사용할 때, “.class값”으로 표현한다.
- JavaScript에서 HTML 요소를 선택할 때 getElementByClassName을 통해 class 요소들을 선택할 수 있다.
CSS 우선순위
CSS 우선순위는 id > class > tag 이다.
id | class |
특정 요소에 이름을 붙히기 위해 고유한 값 적용 | 여러 요소를 그룹으로 표현하기 위해 적용 |
한 문서에 하나만 가능(중복 x) | 다양한 요소들에 중복으로 가능(중복 o) |
“#id값”으로 CSS 표현 | “.class값”으로 CSS 표현 |
getElementById | getElementByClassName |