본문 바로가기

Web Layouts

(CSS) 태그 id, class로 스타일링 차이

CSS 스타일링 지정할 때 태그에 id 혹은 class를 통해 스타일링 영역을 지정한다. id는 해당 HTML문서에서 한번만 지정이 가능하기에 사용에 주의를 기울여야 한다. 그런데 class도 이름만 다르게 하면 단독으로 사용이 가능하기 때문에 id 와 class를 분명한 차이를 인식하지 못하였다. 그런데 분명한 사용상의 차이를 발견하게 되었다.

 

이 차이는 CSS의 적용상의 흐름을 따라가다 자연스럽게 발생하는 문제 때문에 생겨나지 않았을까 짐작한다. class를 사용하는 이유는 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서이다. 그런데 한꺼번에 동일한 CSS를 적용하다 보니 개별 요소를 배타적으로 표현해야 하는 이슈가 있었을 것이다. 그러다보니 class의 분류외에 id라는 선택자를 사용해서 CSS를 적용해 준것이 아닐까 한다.

 

* id와 class의 차이점을 반드시 기억하세요.

id class
#으로 선택 .으로 선택
한 문서에 단 하나의 요소에만 적용 동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용 스타일의 분류(classification)에 사용