&:active 참 좋다

이번 LV3과제는 다양한 모달과 버튼 연습하기 이다.
많이 복잡한 구조는 없어보여서 먼저 모양 먼저 잡고 기능을 추가했다.

그런데 버튼을 클릭하는 순간만 해당 버튼의 색상이 바뀌는 기능에서
함수를 써야할지 내장된 기능을 찾아야 할지 몰라서 많이 찾아봤다.

useState로 상태도 바꿔보고 onMouseUp과 Down도 사용해봤는데
클릭할 때만 색상이 잠깐 바뀌는 게 아니라
누른 후 다시 클릭할 때 까지 색상이 바뀌어 있었다,,

active는 간단해 보이는데 실행이 안돼서
내 코드 상황에는 적용이 안되는구나 하고 안썼는데
매니저님이 active가 제일 간편할거라 하셔서 다시 시도했지만
이상하게 아무 동작도 안하는 것!

다른게 어렵지 버튼 클릭 이벤트는 별거 아닐줄 알았더니
이게 뭔가하고 몇시간 붙잡다가 또 어이없는 실수를 하고 있었단걸 알게되어따

export const StBtn = styled.button`
  width: 200px;
  height: 50px;
  background-color: white;
  cursor: pointer;
  &:active {
    filter:brightness(80%);
    }
`

ㄴ이렇게 써야하는 걸
어디서 잘못 주워왔는지

&.active {
    filter:brightness(80%);
    }

: 대신 . 을 껴놓고 왜 안되지 하고 있던 것 . . .

마우스 hover 기능도 많이 써봐놓고 이걸 발견 못하다니
요즘 정신이 해이해졌나
집중하자 집중

어쨌든 active기능 참 편리한 것 같다.
아직 나온지 오래 안된 건지 사용을 많이 안하는 건지
너무 간단해서 그런가 관련 글이 얼마 없지만
많이 사용하고 싶다(?)

참고
(mozilla) :active 문서