Selector의 종류와 비교

html에서 쓰여진 텍스트에 CSS를 활용해 다양한 표현을 하기 위해서는 특정 영역을 선택하는 선택자(Selector)가 필요합니다. 주로 사용되는 선택자는 세 가지가 있습니다. 가장 좁고 구체적인 id, 중간맛인 class, 그리고 가장 넓은 범위로 선택하기 위해서는 tag 자체를 선택자로 활용할 수도 있겠지요.

    <div id="selectById">
        여기는 id로 선택된 영역!
    </div>
    <div class="selectByClass">
        여기는 class로 선택된 영역!
    </div>
    <div>
        여긴 클래스나 아이디 따위 없다! 
    </div>

1. id

id는 가장 좁은 범위의 단일 개체를 지칭하는 선택자입니다. 단 한번 선언될 수 있기 때문이지요! 하나의 html 문서 안에는 단 하나의 동일한 id만이 존재할 수 있습니다. 그렇기 때문에 선택성이 가장 높은 선택자입니다.
CSS페이지에서 #id 로 불러올 수 있습니다. 위의 페이지에서 '여기는 id로 선택된 영역!'에 CSS 속성을 입히려면 #id{}를 통해 원하는 css를 입힐 수 있습니다.
아래와 같은 표현을 통해 글자에 빨간색을 입힐 수도 있어요.

#selectById {
    color: red;
}

2. class

class는 id보다는 넓은 범위의 개체를 지칭하는 선택자입니다. 같은 동일한 클래스를 여러번 선언할 수도 있구요, 하나의 html안에서 같은 클래스 이름으로 묶인 여러 요소들이 있을 수도 있어요. 그래서 실제로 범용성이 가장 높은 선택자입니다.
css 페이지에서는 .class로 불러올 수 있습니다. 위 html에서 '여기는 class로 선택된 영역!'에 css 스타일을 입히려면 css문서에서 아래와 같은 표현으로 파란 색을 입힐 수 있겠네요.

.selectByClass {
    color: blue;
}

3. Tag

그렇다면 class 도 id 도 지정되지 않은 요소에 대해서, css 설정을 입히려면 어떻게 해야 할까요?
그냥 태그 자체를 불러오면 됩니다. 아래처럼요!

div {
    color: grey;
}

닷 . 도, 샵#도 필요 없으니 가장 간단한 방법이죠!
그러나 실제 html문서에서는 정말 많은 동일한 태그가 사용되므로, 주의해서 사용하실 필요가 있어요.

위 세 css style을 입힌 html을 열어 보면

라는 다소 재미없는 글자의 나열을 보실 수 있습니다.

또한 셀렉터들은 중복해서 사용 가능한데요,

<div class="selectByClass" id="selectById">
태그와 클래스와 아이디로 중복해서 선택된 영역!
</div>
<div class="selectByClss">
태그와 클래스로 중복해서 선택된 영역!
</div>

이런 친구를 실행해 보면 어떻게 될까요?

또 이러한 노잼인 텍스트가 띄워집니다.
위를 통해 셀렉터에도 우선순위가 있으며, id>>>>clas>>>>>>tag 의 우선순위에 따라 선택자 우선순위가 매겨진다고 보시면 되겠습니다.