“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
선택자(selector)란?
선택자란 CSS로 UI의 어느 부분을 디자인 할 부분, 즉 표현할 대상입니다.
CSS로 속성을 부여하는 형식은 다음과 같습니다.
요소를 선택하는 방법, 즉 선택자의 종류로는 type 선택자, id 선택자, class 선택자 등 여러 가지가 있습니다.
그 중에서 ID 선택자와 CLASS 선택자의 차이점에 대해서 알아보려고 합니다.
ID 선택자
HTML 문서의 요소 중 같은 요소도 각기 다른 이름을 지정해서 따로 속성을 부여할 수가 있습니다.
HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id 명을 또 주면 안됩니다.
아이디명 또한 태그와 겹치면 안됩니다.
CSS에서는 id 선택자 앞에 #를 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
CLASS 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수도 있습니다.
class로 이름을 붙이면 가능합니다.
즉, 여러 개의 요소에 같은 class명을 부여할 수 있습니다.
또한 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.
CSS에서는 class 선택자 앞에 '.'을 붙여야 합니다.
클래스명과 태그가 겹치면 안됩니다.
ID 선택자와 CLASS 선택자의 차이점
ID 선택자는 유일한 요소에만 스타일을 적용할 때 사용하고,
CLASS 선택자는 복수의 요소들에 스타일을 적용할 때 사용합니다.
ID는 하나 하나의 요소이고, CLASS는 요소들의 묶음을 나타냅니다.
ID선택자는 body 태그 안에 한 개만 존재할 수 있고, CLASS 선택자는 여러 개의 태그에 동시에 적용될 수 있습니다.
같은 선택자로, 같은 속성을 정의하더라도 우선 순위에 따라서 스타일이 재정의됩니다.
ID 선택자가 CLASS 선택자 보다 더 높은 순위입니다.