TIL: 9일차 "pseudo-selector & State"

mong-byte·2021년 4월 13일
0

CSS를 다룰때엔 많은 옵션이 있다.
그 중, pseudo-selector 이하 수도 선택자라 불리는 옵션에 대하여 이야기 하려 한다.
수도선택자는 지정 된 선택자에 가상의 클래스를 부여하는 선택자이다.
수도선택자의 표기법은,

contents:hover {
  color: red;
}

와 같이 나타내는데, 위의 예에서 :hover이라 적힌 부분이 바로 수도선택자이다. 컨텐츠를 지정하는 선택자에서 부가적으로 선택 할 수 있는 옵션이 수도선택자인것이다.

수도선택자는 다양한 옵션을 지니는데, 대표적인것만 이야기 하자면,

  • :active : 해당 컨텐츠에 active 요소를 추가한다.
  • :hover : 해당 컨텐츠에 마우스가 올라갔을때 변화를 준다.
  • :first-child : 해당 요소의 첫번째 자식요소를 지정한다.
  • :focus : 해당 요소가 focus 되었을때 변화를 준다.
  • 특히 여기서 active와 hover, focus는 해당 컨텐츠가 특정한 상태가 되었을때 변화를 주는 State에 관여하는 수도선택자이다.

    이는 앞으로 CSS를 사용하면서, 좀 더 동적으로 보이게 하는 효과를 주기위해 자주 사용하는 속성이 될것이다.

    이 외에도 많은 선택자가 있기에, 코딩중 필요하다면 MDN에서 검색하는것을 생활화 하자.

    관심 있을 만한 포스트

    0개의 댓글