동적 가상 클래스 선택자

user action pseudo-classes
동적 가상 클래스 선택자

유저와의 인터렉션이 필요한 부분에서 자주 사용하는 선택자들.
어떤 상태나 조건을 만족했을때,
유저의 액션에 따른 상태변화에 따라 조정되는 선택자이다

element:hover

요소에 마우스를 갖다댔을 때의 상태를 나타냄.
ex)

a:hover{
	background-color: ~;
}

a태그 부분에 마우스를 갖다댔을 때 배경 색이 바뀌는 변화가 이루어지도록 한다.

element:active

클릭하는 순간 상태 변화가 이루어지도록 한다.
ex)

a:active{
	background-color: ~;
}

클릭하는 순간 해당 태그의 배경 색상이 바뀌게 된다.

element:focus

어떤 요소가 포커싱이 되었을때의(입력이 될 상황)상태를 알려주고 싶을때 사용한다.
ex)

input:focus{
	border-color: ~;
}

포커싱이 되었을 때 보더 컬러에 변화가 적용된다.