CSS states

이번시간에는 아주 간단하고 단순한 CSS states에 대해 연습해 보도록 하겠습니다.

제일 먼저 박스를 만들고,

 

 

style에서 배경색을 빨간색으로 설정해주고, 박스에 lalala를 입력해 보겠습니다.

 

 

 

div태그를 지우고, span태그로 고친 다음, 사이즈는 40px으로 설정하겠습니다.

 

 

여기서 마우스 우클릭으로 검사로 들어가보면 .hov에서 state를 살펴볼 수 있습니다.

 

 

위와 같이 active, hover, foxus, visited, focus-within과 같은 state가 있습니다.

지금부터 대표적인 CSS state인 hover, active, focus state에 대해 알아보도록 하겠습니다. 

먼저 .box:hover{background-color: pink;}라고 작성하여, hover state에 대해 살펴 보겠습니다. 

 

 

마우스 커서를 박스 위로 올려 보면, 배경색이 핑크색으로 변하는 것을 확인할 수 있습니다.

 

 

 

이번에는 active state에 대해 알아보기 위해 .box:active{background-color: green;}을 입력해 보겠습니다.

 

 

active state는 박스를 클릭할 때마다, 배경색이 초록색으로 변하는 것을 확인할 수 있습니다.

 

 

hover와 active를 모두 적용해 주면,

 

 

박스 위에 커서를 가져왔을 때, 핑크색으로 변하고, 박스를 클릭하면 초록색으로 변하는 것을 알 수 있습니다.

 

 

 

이번에는 .focus state에 대해 알아 보기 위해, span태그를 textarea로 바꿔 보겠습니다. 

 

 

그럼 박스의 경계선이 강조된 것을 확인할 수 있습니다.

 

 

여기서 .box:focus{background-color:blue;}를 입력 후, 

 

 

박스 위로 커서를 가져 갔을 때, 분홍색으로 바뀌고, 박스를 클릭하면 파란색으로 변합니다.

 

 

클릭 후, 커서를 다시 박스 위로 옮겨도 더이상 핑크색으로 변하지 않는 것을 확인할 수 있습니다.
왜냐하면, focus명령이 더 중요하고 마지막 명령이기 때문에, hover명령이 무시된 것으로 이해할 수 있습니다.