selector, state

css 에서 html의 element 를 선택하는 방법은 여러가지가 있다.

 

<selector>

1.

body{

              background-color:red;

         }

 

2.

div input {

                  background-color:blue;

               }

div tag안에 존재하는 모든 input을 선택(div 안의 form 안에 input 이 존재하더라도 선택됨)

 

3.

div > input{
                  background-color:aqua;

                 } 

div tag 의 직속 자손의 tag 만을 선택

 

4.

div + p{

            background-color:pink;

           }

div tag 바로 밑에 있는 p 태그를 선택

 

5.

input [type='text']{

                           background-color:teal;

                          }

 input tag 중 type attribute를 text로 가지고 있는 input 만 선택

 

*

attribute 속성 그 자체를 선택해주고 싶다면(attribute 속성을 꾸며주고 싶다면) 다음과 같이 선택해 줄 수 있다.

input::placeholder{

                               background-color:tomato;

                             } 

*

 

<state>

어떤 tag가 선택되거나 focused 되거나 어떤 상태를 가졌을 때 스타일을 주고 싶다면!

 

input:focused {

                        color:white;

                        font-size:30px;

                       }