states (pseudo selecotrs)

:active

active는 사용자가 활성화한 요소를 나타냄. 마우스를 사용하는 경우 보통 마우스 버튼을 누르고 떼는 시점까지를 의미

보통 <a> <button> 과 함께 사용

active로 정의한 스타일은 자신보다 뒤에 있고 동등한 명시성을 가진 다른 pseudo selectors ((:link, :hover, :visited)가

덮어 쓴다.

적절히 디자인 하려면 LVHA(:link — :visited — :hover — :active)순으로 배치 할것

:hover

hover는 포인팅 장치를 사용해 상호작용, 보통 사용자의 커서가 올라가면 활성

 

:focus

focus는 양식의 입력칸 등 포커스를 받은 요소를 나타냄. 보통 사용자가 요소를 클릭 또는 탭키를 눌렀을 때 발동

 

*focus-within 

element:focus-within{}

요소 안에 어떤 것이라도 포커스가 되면 요소의 스타일을 변경하는 것.

:visited

visited는 사용자가 방문한적이 있는 링크를 표시, visited가 바꿀 수 있는 스타일은 제한적 오직 링크에만 적용됨.

 

사용가능 css 속성

color, background-color, border-color, border-bottom-color, border-left-color, border-right-color,

border-top-color, column-rule-color, outline-color

 

사용가능 svg속성

fill, stroke

 

:focus-within

focus-within은 pseudo selector가 focus 받았거나 , 포커스를 받은 요소를 포함하는 요소를 나타냄.

즉 :focus와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소

흔한 예시로 <form> 의 <input> 필드 중 하나가 포커스 된 경우 전체 <form>을 강조해야 할 때 유용하다.

developer.mozilla.org/ko/docs/Web/CSS/:focus-within

 

*element:hover element:focus{}  각 요소에 다른 states로 효과를 줄 수 있다.