11 CSS 기초 : 선택자

1.

선택자를 사용 하는 이유 ?

 

웹 페이지를 구성하는 여러 요소에 효과를 효율적으로 줄 수 있기 때문에 이다.

 

 

다음과 같이, id 속성을 사용했을 경우는 어떤 선택자를 사용 해야 할까 ?

 

id 선택자를 사용 하면 된다.

 

id 선택자는 . (마침표) 대신에 #을 사용 하면 된다.

 

그냥 이렇게 약속 되어 있다.

 

 

2.

 

근데, 여기서, 아래와 같이 변경 해 보자.

 

 

 

위의 이미지를 보면, 한가지 사실을 알 수 있다.

 

첫번째 span 태그에 둘러쌓여 있는 JavaScript 라는 단어는,

 

class 선택자 에게도 영향을 받고,

id 선택자 에게도 영향을 받는다.

 

3.

클래스는 무언가를 그루핑 한다는 의미를 가지고 있고,

아이디는 어느 한 가지 대상을 식별 한다는 의미를 가지고 있는데,

 

학교를 예시로 든다면,

 

반 == class

 

학번 == id

 

이다.

 

그래서, class 속성의 값으로 js 을 줬다면,

js 라는 값을 가진 모든 반 학생들을 그루핑 한다는 의미가 된다.

 

반면에, id 속성은 학번이라고 했고,

 

학번은 절대로 학교에서 중복이 되면 안된다.

 

주민등록번호가 유일한 것처럼 생각 하면 된다.

 

그래서 id 속성의 값으로 처음 first 라는 값을 사용 했다면,

 

그 다음 부터는 절대로 first 라는 값을 사용 해서는 안된다.

 

id 속성의 값은 유일 해야 한다.

 

4.

id 선택자 >>

일부 태그를 예외로 처리하고 싶을 때 사용 하면 좋다.

 

class 선택자 >>

포괄적이며, 효과를 주고 싶은 태그에, 광범위 하게 효과를 주고 싶을 때 사용 하면 좋다.

 

5.

선택자 우선 순위

 

아무리 효과를 많이 알고 있더라도,

아무리 많은 CSS 속성을 알고 잇더라도,

 

그 속성을 누구에게 적용할 것인지,

 

타겟팅을 정확하게 할 수 없으면 아무런 소용이 없어진다.

 

따라서, 선택자 우선 순위의 개념을 알아야 한다.

 

 

 

 

확인 결과,

 

span { color : blue } 는 전혀 동작 하지 않는 모습을 확인 할 수 있다.

 

이는 우선 순위 이슈 이다.

 

class 속성값으로 js에 해당하는 아이들은,

 

글씨색이 전부 powderblue 색 이어야 하는데,

 

id 속성을 지니고, 해당 속성값에 해당하는 선택자에게 영향을 받은

첫번째 아이는 글씨색이 노란색 인것을 확인 할 수 있다.

 

즉,

 

우선순위는 다음과 같다.

 

id 선택자 >>>>> class 선택자 >>>>> 일반 선택자 이다.