[CSS] hover Media query

CSS의 Media query에 대해 알아보다가 몰랐던 기능인 @media(hover: hover)가 유용하다고 느껴 이것에 대해 알아보고자 합니다.

hover

hover은 데스크톱에서 특정 요소에 마우스를 올렸을 때 행동을 취하는 기능을 제공합니다. 

a:hover {
  background-color: red;
}

여기서 문제는 '데스크톱'이라는 것입니다. 

 

만약 모바일 이라면? 

 

기존 hover을 사용하면 모바일에서 아주 잠시 동안 데스트톱에서 보이던 hover 효과가 보이게 되고 이것은 모바일 사용자에 있어 부정적인 경험을 주게 됩니다. 

 

당연하게도 모바일에서는 마우스를 올려놓는 행위를 하는 것이 아니라 터치를 하는 행위를 하기 때문입니다.

 

이때 이것을 해결할 수 있는 방법이 바로 Media query를 사용하는 것입니다.

Media Query

미디어 쿼리의 종류는 수없이 많은데 자세히 알아보고 싶다면 MDN 사이트에서 직접 확인해볼 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

데스트톱에서 텍스트를 hover하면 검은 배경에 하얀색 글씨 색으로 변하는 것을 확인할 수 있습니다. 이제 구글 콘솔 로그를 통해 모바일 환경으로 변경 후, 클릭을 해보면 그동안 문제가 되었던 모바일 hover 현상을 해결했다는 것을 알 수 있습니다.

 

즉, 실제 PC에서는 hover 효과가 정상적으로 동작하지만, 모바일에서는 hover에 대한 처리가 이루어지지 않습니다.

 

마찬가지로 아래와 같이 사용가능합니다.

@media (hover: none) {
  /* styles... */
}

위 코드를 사용하면 hover가 되지 않은 디바이스에서의 스타일을 따로 적용해 줄 수 있습니다.

---

오늘은 이렇게 Media query기능 중 하나인@media(hover: hover)에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟