pseudo class | 개념 및 &:hover 통해서 구현

pseudo class - 요소의 상태에 따라 선택하여 꾸며주는 것을 의미

 

LESS 전처리기에서, & 통해서 부모 element 접근할 수 있다. (react에서도 동일하게 사용 가능)

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items:center;
  animation: ${rotationAnimation} 1s linear infinite;

  span {
    font-size: 36px;
    &:hover { // span:hover 와 동일 
      font-size: 100px;
    }
  }
`;

 

 

가상 선택자(가상 클래스)	설명
:hover	선택자위에 마우스 커서가 있을 때
:active	선택자가 클릭된 상태일 때
:focus	선택자가 마우스나 키보드에 의해 선택되었을 때
:visited	선택자(링크인 경우)가 이미 방문한 사이트일 때

 

 

참고 문서 > 

🏷 mdn 문서 > https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

🏷 [CSS] 가상 선택자(Pseudo selector) 개념, 예시 >  https://bio-info.tistory.com/67

\https://wnsdufdl.tistory.com/109

🏷 What does an "&" before a psedo element in CSS mean > https://stackoverflow.com/questions/13608855/what-does-an-before-a-pseudo-element-in-css-mean

🏷 react > https://stackoverflow.com/questions/76812091/the-relationship-between-styled-component-and-less-preprocessor