11. CSS / 개요, 선택자, 상속

 

기본 선택자와 복합 선택자

 

기본선택자(4가지)

 

1. 전체 선택자 -> * {}

 

2. 태그선택자 -> 태그이름으로 선택

 

3. 클래스 선택자

 

4. ID 선택자

 

 

복합선택자

 

1.일치 선택자

span.orange ( 오렌지 클래스인데 span에 있는 오렌지 클래스 )

 

2.자식 선택자

ul>.orange ( ul의 자식중 클래스가 orange인 태그 )

 

3.후손 선택자 , 자식, 자손 다 포함(띄어 쓰기가 선택자의 기호로 사용된다. )

div .orange

 

4. 인접 형제 선택자 ( ex) orange 클래스의 바로 하나의 다음(다음 형제) 태그를 선택 )

.orange + li orange 태그의 다음 li 를 선택

 

5. 일반 형제 선택자 ( orange 클래스의 모든 다음 형제 태그를 선택 )

.orange ~ li

 

 

가상 클래스 선택자

    : ( 콜론 기호가 1개 붙어 있는 선택자 ) 

 

    1. hover ( 기본선택자에 마우스가 올라가 있는 동안에만 적용 ) 

         ex) <a href="http://naver.com> naver </a>

         css) a:hover {

                        font=weighr :bold;

                        background-color : tomato;

                } 

 

 

   2. active ( 기본선택자에 마우스로 클릭 하는 동안에만 적용 ) 

          css) a:active {

                        font=weighr :bold;

                        background-color : tomato;

               } 

                   

 

   3. focus ( 기본선택자가 포커스된 동안에만 적용 { 대화형 콘텐츠 에서만 사용 가능 } )

          대화형 콘텐츠 input, img 등 (input 요소에 많이 사용)

          css) input {

                    width : 100px;

                    outline : none;  // 인풋태그는 border가 적용이 안되고 outline이 적용됨

                    border : 1px solid red;

                    padding : 5px 10px;

                } 

                input:focus { // 대화형 창을 포커스 하면 색이 변한다.

                       border-color : red; 

                } 

               

 

   4. first-child ( 기본선택자의 형제 요소 중 첫번째 요소라면 선택 ) 

     

클래스로 따로 안빼는 이유는 자잘자잘 모든 것에 클래스를 넣는 것은 비효율적이기 때문

 

 

  5. last-child ( 기본선택자의 형제 요소중 마지막 요소 선택 ) 

 

 

 

  6. nth-child ( 기본선택자의 선택한 요소중 그 요소 선택 ) 

          

n 은 0부터 시작

알아두어야 할 점

왼쪽에서 읽는것보다 오른쪽에서 부터 읽는 것이 더 정확 자식의 첫번째는 div이고 첫번째에 p가 없으니 색깔은 변하지 않는다.

 

     

     7.nth of type ( 태그이름과 동일한 타입인 형제 요소중 태그가 n번째 요소라면 선택 )

ex) p태그에서만 고를수 있다. // 태그 이름만 가능 ( 클래스, 아이디는 안된다. )

 

 

 

     8. not 선택자 ( 선택한 선택자만 제외하고 성능 추가 ) 

         css ex) .fruits li:not(.strawberry) {

                     color : red;

                  } // 딸기만 빼고 나머지 글씨 빨간색

 

 

 

 

 

 

가상 요소 선택자 ( :: 콜론 2개 붙음 )

       before ( 특정 요소 내부의 앞에 , 컨텐츠를 삽입할 때 사용 ) content 필수 !

content 는 필수 어떠한 박스 같은걸 추가할 때도 content : "" 를 이용

 

        after ( 특정 요소 내부의 뒤에, 내용을 삽입 )

 

 

 

 

 

속성 선택자 

 

    [attr] ( 속성 attr을 포함한 요소 선택 ) 

 

-따로 클래스를 선언하지 않고 속성만 가지고 css 를 설정이 가능하다.

 

 

     [attr=value]  ( 속성 attr을 포함하며 속성 값이 value 인 요소 선택 )

 

 

   [attr^=value] ( 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택 )

 

value로 시작하는것을 설정가능 "btn-" -> "b"만 적어도 적용이 됨

 

     [attr$=value]  ( 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택 )

 

 

 

상속 

  (대부분 글자를 다루는 속성들이 상속이 된다.)

 

 

 

우선순위 

(같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 css속성을 우선 적용할지 결정하는 방법)

 

1. css = !important

2. 인라인 1000 (잘 안씀 )

 

3. id 선택자 100점

4. class 선택자 10점

5. 태그 선택자 1점

6. 전체 선택자 0점

7. 상속 점수 x점