css selectors(class & id & universal)

-중괄호 앞에 있는 녀석

ex) h1 {
    color:red
 }

에서 h1 처럼 ,,

 

class Selector

"." + class명 + {css}

class : 요소들을 그룹화

  ex) <h2 class="green-text"green</h2>

=> css :  .green-text{
 color:green;

}

-태그가 달라도 같이 그룹화 설정 가능하다 (ex. <h2 class="green-text"> /   <p class="green-text"> 

 

Id Selector

"#" + id명 + {css}

- class와 마찬가지로 요소들을 그룹화

 ex) <h2 id="main">green</h2>

==> css : #main{

  color:green;

}

 

Difference between Class selector and Id selector 

Class selector

여러 요소에 적용 가능

Id selector

단일 html 파일의 한 요소에만 적용 / 고유 / 파일과 클래스당 하나의 요소만 있음

 

universal selector

"*" + {}

universal의 뜻에 맞게 모든 속성에 적용