CSS(Cascading Style Sheet)
웹사이트를 스타일링할때는 크게
제작자 / 사용자 / 브라우저 스타일을 고려해야한다.
우선순위는 제작자 -> 사용자 -> 브라우저 순이다.
"!important" 를 사용하여 순서를 무시할 수 있지만, 현업에서는 매우 추천하지 않는다고 한다.
selectors
- Universal -> *
- type ->Tag
- ID -> #ID
- Class -> .class
- State -> :
- Attribute -> []
기본예시
Universal을 통해 모든 글자를 초록색으로 출력.
type(li) 만 파란색으로 출력.
ID가 "special" 인 태그만 분홍색으로 출력. (# 사용!)
Class명이 "red" 인 박스만 배경색을 노란색으로 출력. (. 사용! 비어있는 박스는 보이지 않음!)
State를 사용해 마우스가 올라간 버튼은 빨란색으로 글자 출력. (: 사용!)
Attribute를 사용해 href(Hyper Reference)가 있는 태그만 보라색으로 출력. ([] 사용!)
CSS가 익숙해질 수 있는 게임 링크!
답지
01 plate
02 bento
03 #fancy
04 plate apple
05 plate#fancy pickle
06 .small
07 orange.small
08 bento orange.small
09 plate, bento
10
11 plate
12 plate + apple
13 bento ~ pickle
14 plate > apple
15 plate orange:first-child
16 plate apple:only-child, plate pickle:only-child
17 #fancy apple, pickle:last-child
18 plate:nth-child(3)
19 bento:nth-last-child(3)
20 apple:first-of-type
21 plate:nth-of-type(even), plate:nth-of-type(2n)
22 plate:nth-of-type(2n+3)
23 plate apple:only-of-type
24 orange:last-of-type, apple:last-of-type
25 bento:empty
26 apple:not(.small)
27 [for]
28 plate[for]
29 [for='Vitaly']
30 [for^='Sa']
31 [for$='ato']
32 [for*='obb']
