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;
}