모바일에서 CSS hover 적용할 때 효과가 지속되는 문제 해결!
모바일 터치 후 호버 효과가 사라지지 않을 때 프론트엔드 개발하다 보면 한 번쯤은 겪는 문제다. 데스크톱에서는 멀쩡하게 작동하던 버튼이 모바일에서는 터치 후에도 호버 상태가 계속 유지되는 현상 말이다.처음에는 "뭐지? 왜 버튼을 눌러도 색깔이 안 돌아와?" 하면서 당황했는데, 알고 보니 모바일과 데스크톱의 상호작용 방식이 근본적으로 다르기 때문이었다. 문제의 핵심모바일에서는 "마우스를 올린다"는 개념 자체가 없다. 터치스크린에서는 터치하는 순간 hover 상태가 활성화되고, 다른 곳을 터치하기 전까지 그 상태가 유지된다. 그래서 버튼을 터치한 후 다른 영역을 터치하지 않으면 호버 효과가 계속 남아있게 된다. 최신 CSS 미디어 쿼리로 해결하기예전에는 @media (max-width: 768px) 같은..
