2. Selector (Class / ID)

앞에서 CSS 효과를 줄 때, p 태그안에 있는 i 태그만을 효과를 주고싶을때, 우리는 p i {} 로 선언해주었다.

 

만약 p 태그를 CSS효과를 주고싶을 때,  p{}라고 선언을 한다면, html 페이지 내에 있는 모든 p태그들에게 동일하게 

효과가 적용 될 것이다. 

이런 문제를 해결하기위해 , 각 태그별로 고유의 id값을 주어 구분을 할 때 사용된다.

이름 이라고 생각하면 될 듯 하다!

CSS 형식 

Class 선택자 :     .green-color-text{ color: green;} 

ID       선택자 :     #favorite-text{ color: green;} 

- Class 는    .(점) 

- ID는          #(샾)

Class  

- 여러 태그 혹은 한개의 태그에 Class 값을 주어 효과를 적용할 때 사용 

- 여러 태그를 적용 할 수 있음

                       HTML

      <p class = "green-color-text"> 문단 1 </p>

      <p> 문단 2 </p>

               <p class = "green-color-text"> 문단 3 </p>

      <p> 문단 4 </p>

--------------------------------------------------

                       CSS

      .green-color-text{ color: green ;}

ID       

- 특정 한개의 태그에 id 값을 주어 효과를 적용할 때 사용 

- 같은 id값으로, 여러 태그 사용 불가

                       HTML

      <p id = "favorite-text"> 문단 1 </p>

      <p> 문단 2 </p>

               <p id = "second-favorite-text> 문단 3 </p>

      <p> 문단 4 </p>

--------------------------------------------------

                       CSS

      #favorite-text{ color: green ; fontsize : 40px ;}

      #second-favorite-text{ color: red ; fontsize : 60px ;}

Class 와 ID 의 차이점

Class	ID
같은 Class 값을 여러 요소(태그)가 가질 수 있음	같은 ID 값을 여러 요소(태그)가 가질 수 없음
한 요소(태그)가 여러 클래스를 가질 수 있음	한 요소(태그)가 단 하나의 ID를 가질 수 있음