18. States

<state>

active: 마우스로 버튼을 클릭했을 때 스타일이 변경됨.

hover: 마우스 커서가 대상 위에 있을 때 (클릭X) 스타일이 변경됨.

focus: 마우스 클릭, 키보드로 선택 등 대상을 선택하였을 때 스타일이 변경됨.

visited: 링크에 방문했을 때 스타일이 변경됨. (링크에만 적용가능)

focus-within:  focused된 자식을 가진 부모 element에 적용됨.

 

 

 

1) active

버튼을 하나 만듬

노란색의 Hello 버튼을 만듬.

 

클릭하면 색이 변하게 하려면?

 

 

마우스로 버튼을 클릭하자 색이 변함.

button:active를 하여 버튼이 클릭되었을 때를 선택하여 스타일을 변경함.

마우스로 버튼을 클릭을 하고 손을 뗄 때까지 변경된 스타일을 유지함.

 

 

 

2) hover

버튼을 클릭하지 않아도 마우스를 가져다대면 색이 변함

button:hover를 하여 마우스 커서가 버튼에 올라가면 스타일이 변경되게 함.

클릭하지 않아도 스타일이 변함.

 

 

 

3) focus

선택된 박스의 색이 변함

input 박스를 만들고

input:focus를 하여 마우스로 클릭하거나 키보드 탭을 눌러서

박스가 선택되면 스타일이 변함.

 

 

 

4) visited

링크를 들어가기 전에는 파란색, 들어간 후에는 초록색으로 변함

링크를 연결해두고

a:visited를 하여 링크를 방문했다면 그 링크의 스타일을 변경하게 함.

visited는 링크에만 사용가능 함.

 

 

 

5) focus-within

form 안에 input 상자가 위치하도록 만듬

form 안에 input 상자가 세로로 나열되도록 만듬.

 

 

form 안에 있는 input 박스를 선택하자 form의 boder 색이 변함

form:focus-within을 하여

form의 자식 elememt가 선택되면 form의 스타일이 변하도록 함.

 

form에게 스타일을 주기 위해서 form이 아니라,

form의 자식 element인 input박스를 선택해야함.