· 요소, class, ID선택자 :
* 여러개 clss 가질때
ex) <div class = "box-0 box-1 box-2"></div>
선택법 :
.box-0, .box-1, .box-2
.box-0.box-1
.box-0.box-2
.box-1box-2
.box-0.box-1.box-2
ex) <div class = "box" id="so"></div>
선택법 :
#so
.box
#so.box
· 자식, 자손, 형제 선택자 :
* 자식선택자 : parent > child
* 자손선택자 : parent descendants => 모든 자손 선택
* 형제선택자 : parent + sibling ex) .active+li = active 다음에 오는 li 한개만! 선택
parent ~ sibling ex) .active~li = active 다음에 오는 모든 li선택
가상클래스 (structural pseudo-class) :
* element:first-child
* element:last-child
* element:nth-child(n)
동적 가상클래스 (user action pseudo-class) :
* element:hover 마우스 갖다 댔을 때
* element:focus 포커스가 되었을 때
* element:active 눌렀을 때 찰나의 순간
ex) a:hover{
border-color: blue;}
* Selector Rule *
① CSS는 나중에 선언된게 이전에 선언된걸 덮어버림
② 1등: ID선택자, 2등: class선택자, 3등: 요소선택자 순으로 우선 순위
③ Rule-breaker
* inline-style : html에 style 먹여버리기
* !important는 그냥 다 이김
④ 부트스트랩에서 제공하는 grid system
container row col은 width, height, padding&margin 좌우 조정 X
+ h1::after{
content:''
}
dispaly가 기본적으로 inline
'CSS' 카테고리의 다른 글
CSS gradient (0) | 2020.07.26 |
---|---|
CSS reset 할때 신경써줄것 (0) | 2020.07.25 |
CSS media-query (0) | 2020.07.25 |
CSS transform (0) | 2020.07.24 |
CSS box-shadow (0) | 2020.07.24 |