css) Selector

https://www.w3schools.com/css/css_syntax.ASP

 

 

 

ID selector

태그에 id를 지정해서 원하는 태그들만 스타일을 지정할수 있다.

ID는 html 내에서 유일해야한다. 동일한 ID가 두개있을수 없다. 

index.html

 

style.css

 

web

 

 

---

Class Selector

스타일 클래스를 정의해 원하는 태그에 적용할수 있다.

 

index.html

 

 

style.css

 

web

 

 

ID와 클래스의 차이점은 ID는 유일해야하지만 클래스는 유일하지 않아도 된다.

 

index.html

 

style.css

 

web

 

---

div, span

 

div, span 태그로 스타일을 적용할 범위를 정할수 있다.

보통 class와 같이 쓰면 유용하다.

 

index.html

 

style.css

 

web

 

보면 div 태그로 h3과 p 태그를 감싸고 있고, class="red"로 설정해 줬더니

해당하는 h3, p 태그가 red selector의 스타일대로 변경됐다.

 

span은 "i'm upper case " 라는 문자열을 감싸고 있고 class="red"로 설정했더니 

해당 문자열이 대문자가 됐고 red selector의 스타일대로 변경됐다.

 

 

div와 span의 주요 차이점은 div은 적용하면 개행이된다.

위의 span을 div로 바꿔보면 

index.html

web

 

---

Universal Selector

 

모든 태그에 대하여 정의할수 있는 selector.

* 로 나타낸다.

Specificity는 가장 낮다.

 

style.css

 

index.html

web

 

Specificity가 가장 낮으므로 style.css에 가장 마지막에 universal selector에 의해 정의되어 있음에도

그 전에 정의된 red 클래스에 의해 <p> 태그는 빨강색이 됐다.

(css는 같은 셀렉터라면 가장 마지막에 정의한 셀렉터를 기억한다)

 

https://www.w3schools.com/css/css_specificity.asp

CSS Specificity