HTML_pseudo-class

▶️ 상태에 따라 스타일을 줄 수 있는 Pseudo-class

  .btn:hover {
    background : chocolate; /*마우스를 올려놓을 때*/
  }
  .btn:focus {
    background : red; /*클릭 후 계속 포커스 상태일 때*/
  }
  .btn:active {
    background : brown; /*클릭 중일 때*/
  }

1. pseudo-class 셀렉터를 붙이면 여러 상태에 따른 스타일을 지정해줄 수 있다.
2. 1. hover, 2. focus, 3. active 스타일을 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작한다.

---

▶️ 다른 pseudo-class 목록

  :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
  :playing /*동영상, 음성이 재생중일 때*/
  :paused /*동영상, 음성이 정지시*/
  :autofill /*input의 자동채우기 스타일*/
  :disabled /*disabled된 요소 스타일*/
  :checked /*체크박스나 라디오버튼 체크되었을 때*/
  :blank /*input이 비었을 때*/
  :valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
  :invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
  :required /*필수로 입력해야할 input의 스타일*/
  :nth-child(n) /*n번째 자식 선택*/
  :first-child /*첫째 자식 선택*/
  :last-child /*마지막 자식 선택*/

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
여기서 더 많은 수도코드 목록을 찾아볼 수 있다.

---

▶️ focus, link, visited

  input:focus {
    border : 2px solid red;
  }

대상에 커서가 찍혀있을 때 인풋에 스타일을 주고 싶다면 :focus를 붙인다.

---

  a:link { 
    color : red; /*방문 전 링크*/ 
  } 
  a:visited { 
    color : black; /*방문 후 링크*/ 
  } 

:link를 붙이면 방문 전 링크, :visited를 붙이면 방문 후 링크에 스타일을 넣을 수 있다.

---