선택자

선택자

선택자에는 저번 강의에서 배운 class 외에도 id가 존재한다. class에 대한 스타일을 지정할 때 다음과 같은 코드를 태그 안에 넣어주었다.

<style>
  .js {
    color: red;
  }
</style>

id는 class와는 달리 .대신 #을 붙여야 한다는 차이점이 있다.

<style>
  #first {
    color: green;
  }
</style>
 

Class와 Id의 차이점

class라는 단어는 그룹을 의미하고, id는 특정한 것을 식별한다는 의미이다. class 선택자는 같은 스타일이 지정될 그룹을 의미하는 것이고, id는 특정한 태그에만 지정하고 싶은 스타일을 나타내는 것이다. 그래서 class는 중복될 수 있지만, id는 한 페이지에서는 딱 한번만 쓰이게 되는 것이다.

즉, class 선택자가 id 선택자에 비해서 더 포괄적이다. class 선택자를 이용하면 광범위한 효과를 줄 수 있고, id 선택자를 이용하면 예외적으로 디자인을 바꿀 수 있는 것이다. 그렇기 때문에 class 위에 id를 얹어서 구현하는 것이 효율적이다.

선택자의 우선순위

만약 앞에 .과 # 모두 지정하지 않으면 그것은 태그 이름을 의미한다. 즉 아래와 같은 코드를 사용하면 이 페이지에서 span이라는 이름의 태그는 모두 디자인이 바뀌는 것이다.

<style>
  span {
    color: blue;
  }
</style>

<span id="first" class="js">Javascript</span>

이 태그는 span이기 때문에 파란색이 될 수도 있지만, id가 first이기 때문에 초록색이 될 수도 있고, class가 js이기 때문에 빨간색이 될 수도 있다. 과연 어떤 색깔이 나타나게 될까?

정답은 초록색이다. id의 우선순위가 가장 높은 것입니다. 만약 id를 지우게 되면 class의 속성이었던 빨간색이 나타나게 된다. id와 class를 모두 지워야지만 span의 스타일인 파란색이 나타난다.

즉, id > class > 태그 순서로 우선순위를 가지게 된다.