[CSS] 클릭 이벤트가 있으면 커서 모양 바꾸기

개인 포트폴리오 사이트를 만든 후 코드 리뷰 과정에서 클릭 이벤트가 있는 부분 위에 마우스가 올라가면 커서 모양이 바뀌면 더 좋을 것 같다는 피드백을 받았다. 아무래도 커서 모양이 그대로 유지되다 보니, 그 부분을 클릭했을 때 외부 링크로 연결된다는 것을 잘 모를 수 있겠다는 생각이 들었다.

 

리액트로 작업해서 CSS에는 styled-components를 사용했는데, 그냥 CSS에도 적용되는 것인지는 잘 모르겠다.

const Menu = styled.p`
  ...
  &:hover {
    cursor: pointer;
  }
`;

위와 같이 추가해주면, 메뉴 스타일을 지정해준 컴포넌트 위에 마우스 호버시 커서 모양이 손가락 모양으로 바뀐다!