WEB2 CSS- 선택자의 기본

선택자의 우선순위에 대해서 배웠다.

 

우선 보았던 링크는 회색으로 표현하기 위해 각 링크에 class속성을 써서 값을 saw로 지정해주었다.

그리고 현재 활성화 된 창을 빨간색으로 표현하기 위해서 css링크에 id속성을 쓰고 값을 active로 지정해주었다.

 

그런 뒤 <style> 태그 안에 선택자로 #active, .saw라고 써주고 각각 빨간색과 회색으로 지정해주었는데

active앞에 #을 쓰는 이유는 #이 id선택자라는 뜻이기 때문이고 마찬가지로 saw 앞에 .을 쓰는 이유는

.이 class 선택자라는 뜻이기 때문이다.

 

그리고 선택자의 우선순위는 id선택자는 웹페이지 하나에 하나밖에 못쓰기 때문에 우선순위가 가장 높고

class선택자는 중간 그리고 태그 선택자들은 포괄적이기에 우선순위가 낮다.

즉 구체적일수록 우선순위가 높고 포괄적일수록 우선순위가 낮은 것이다.

 

실행해 보니 봤던 링크는 회색으로 표시 되고 현재 활성화된 링크는 빨간색으로 잘 표시되는 것을 볼 수 있다.