CSS

ref:https://www.w3schools.com/css/css_selectors.asp

 

 

 

 

 

 

 

Simple selectors

 역할

• id = "식별자"
• class = "스타일에 관련됨"
• name =  "전송을 위한 용도로 사용"

 

 

 

Combinators selectors

 

 

1. Descendant Selector

공백은 후손을 나타낸다.

 

 

Child Selector (>)

자식을 가리킴

 

Sibling Selector (+) : 바로 다음에 오는 요소를 표현

Sibling Selector (~) : 바로 다음에 오는 요소들을 표현 

 

 

 

 

 

 Pseudo-classes

 

마우스를 올렸을 때 색이 변함

 

div에 마우스가 올라갔을 때의 p후손요소

p요소의 후손영역에 첫번째 자식요소 

 

CSS Attribute Selectors

 

attribute="_value"로 표현

 

 

 

[attribute|="value"]

top으로 시작하면 yellow를 적용한다.

 

 

Top으로 연결되어 있는 단어는 적용이 되지 않기 때문에 이때에는

[attribute^="value"] 를 사용하면 된다.