[CSS] 선택자 :hover로 onMouse 효과 내기

:hover

CSS는 단순히 HTML 태그의 스타일을 꾸며줄 뿐만 아니라 다양한 선택자(Selector)를 통해서 여러 부가 기능을 사용할 수 있다.

다양한 선택자들이 존재하는데 그중 :hover는 대상이 되는 태그에 마우스가 올라갔을 때 원하는 스타일을 지정할 수 있게 해 준다. 대신 마우스가 대상이기 때문에 반응형 웹에서 모바일이나 태블릿 화면에 대해서는 대응하기 힘들다는 단점이 있다.[1]

:hover 적용 전

이전에 진행했던 Global Navigation Bar를 만드는 프로젝트에서 마우스가 올라갔을 때 요소에 밑줄이 생기는 코드를 작성한 적이 있었다. 이때 작성한 코드는 [그림 1]과 같다.

[그림 1] typescript로 작성했던 마우스 올라갔을 때의 이벤트

 

전체 코드가 아니고 함수가 동작하는 부분만 가져왔는데 대략 정신이 멍해진다. 3개의 state를 만들었고, 각각에 대해서 마우스가 올라갔을 때 상태 변수를 바꾸어가며 동작하도록 만들었다. 이렇게 작성한 이유는 각 요소 간 마우스를 올렸을 때 다른 요소들에는 스타일 반영을 하지 않기 위해서였다. 단순한 스타일을 적용하는데 너무 많은 줄의 코드를 작성하였고, 작성된 로직 자체도 예쁘지 않다. 지금보다도 더 못할 때 작성한 코드이니 그럴 수 있다고 생각했지만, 반드시 고치고 넘어가야겠다는 생각이 들었다.

:hover 적용 후

선택자에 대해서는 알고 있었지만 이전에는 스타일에 관련된 부분들도 컴포넌트 내에서 해결하려고 하였다. 그러다보니 [그림 1]처럼 컴포넌트의 부피가 불필요하게 커지는 문제가 있었다. :hover를 사용하면 요소에 마우스가 올라갔을 때 스타일 변경하는 것을 훨씬 더 쉽게 구현할 수 있다. [그림 2]는 같은 기능을 :hover를 써서 구현한 코드이다.

[그림 2] :hover를 적용한 코드

 

굉장히 단순하면서도 직관적이다. 요소에 마우스가 올라갔을 때, 작성한 CSS 코드를 적용한다. 불필요하게 state를 작성할 필요가 없고 훨씬 간결하게 마우스가 올라가는 이벤트를 처리할 핸들러 함수를 따로 작성해주지 않아도 된다. 만약 선택자로 할 수 있는 특정 이벤트 별로 스타일만 다르게 지정하고 싶은 경우는 :hover와 같은 선택자를 사용하면 쉽고 간결하게 구현할 수 있다.

완성된 결과물

[동영상 1] 완성된 결과물

 

각 지정한 요소에 마우스를 올렸을 때 원하는 스타일이 잘 지정되는 것을 확인할 수 있다.

출처

[1]: :hover - MDN

:hover - CSS: Cascading Style Sheets | MDN