CSS selector

· 요소, 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