[2] CSS 선택자의 기본

1. class 선택자

동일한 디자인을 적용시키려는 태그를 동일한 클래스로 그룹화 하여 디자인을 적용시킨다.

 

>> 모든 링크는 기본적으로 검은색. 사용자가 방문했던 페이지는 회색. 현재 페이지는 빨간색.

회색으로 설정하려는 태그에 각각 style 속성을 이용해서 디자인하는 것이 아니라 class라는 html 속성을 부여한다. 

saw라는 클래스에 대해서 디자인을 설정한다.

class="" 속성과 속성의 값으로 들어가는 saw라고 부여한 명칭도 html 문법이다.

Ex. 잘못된 문법 - CSS는 "saw라는 이름의 태그"를 찾아서 속성을 부여하려고 한다.

  <style>
    saw {
      color:gray;
    }
  </style>

 

우리의 의도는 "saw라는 이름의 클래스"에 디자인을 설정할 것이다.

  <style>
    .saw {
      color:gray;
    }
  </style>

 

class 속성의 값으로는 여러개가 들어올 수 있으면 띄어쓰기로 구분한다.

하나의 태그에는 여러개의 속성 값이 들어올 수 있으며 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

 

<style> 태그에서 후에 나온 명령이 우선순위가 높다.

active 클래스 디자인 적용

saw 클래스 디자인 적용

위 코드는 별로 좋지 못한 코드이다. <a> 태그가 두 개의 클래스에 영향을 받고 있다. 

-> 좀 더 우선순위가 높은 선택자를 사용하면 된다. "id 선택자"

 

---

2. id 선택자

id 의 값은 유일 무의 해야 한다.

※ 각 id 값에 대한 속성은 하나의 태그에서 사용할 것.
id 값이 'abc'인 태그를 해당 웹페이지에서 한 번 사용했으면 다른 태그에서 id값이 'abc'인 속성을 더 이상 사용하지 않을 것을 권고한다. 

 

선택자 우선순위 : id 선택자 > class 선택자 > tag 선택자

(동일 우선순위의 선택 자라면 가장 마지막에 등장한 선택자가 우선순위가 높다.)

  <style>
    a{
      color:black;
      text-decoration: none;
    }
    #active{  	/* 'active'라는 이름의 아이디에 디자인을 적용 */
      color:red;
    }
    .saw {	/* 'saw'라는 이름의 클래스에 디자인을 적용 */
      color:gray;
    }
  </style>

 

class 선택자 보다 우선순위가 높은 id 선택자