css-selector

1. selector란?

  css로 스타일링을 해줄 대상을 지정하는 선택자를 의미한다.

  selector는 태그,class,id 3가지로 나뉜다.

  또한 같은 속성에 대해 스타일링이 적용될 경우 스타일링 우선순위는 id>class>태그이다.

  밑에 class selector 예제를 참조

 

2. 태그 selector

   태그 selector는 태그의 이름을 사용한다. 

   selector가 선정한 태그는 해당 태그로 쓰여진 문자  모두 동일한 스타일링을 적용 받는다. 

    

 

3. Class selector 

   Class selector는  같은 스타일링을 주고 싶은 단일 태그들을 묶는 선택자이다.

   Class selector의 경우   .클래스 이름{    } 으로 선언하고

   클래스로 묶고 싶은 태그에 <태그이름 class="클래스이름> 와 같은 형식으로 쓴다.

 

h1(3번째)과 h2태그(4번째)의 blue,red값이 gr class의 green에 의해 무시 됐다.

 

 

4.id selector

  id selector는 같은 스타일링을 주고 싶은 단일 태그들을 묶는 선택자이다.

  id selector는 #id이름 { }으로 선언하며 원하는 단일 태그에 id="id이름"와 같은 형식으로 쓴다. 

  

 

 

5.Class와 id의 차이는??

 Class의 경우 단일 태그에 여러개의 Class가 포함 되도 상관 없다.

 하지만 id의 경우 단일 태그 하나에 오로지 1개의 id만이 있어야한다.

 

 ex) <h1 class="c1 c2 c3"> (o)

      <h1 id="id1 id2 id3"> (x) -> <h1 id="id2">(o)