[CSS] @media 미디어 쿼리 / 모바일 환경 -> @media (hover : none)

PC 환경에서 잘 적용되던, 미디어 쿼리가 디바이스 모드에서는 적용되지 않았다.

디바이스 모드(개발자 도구의 Device Toolbar)는 기본적으로 모바일 환경(터치스크린)을 시뮬레이션하기 때문에 hover 조건이 적용되지 않아서 발생한 문제였다.
모바일 디바이스는 hover를 지원하지 않으므로, @media (hover: none) 조건이 적용된다고 한다.

/* 데스크톱: 호버 지원 */
@media (hover: hover) and (pointer: fine) {
  ~~~~~~~
}

/* 모바일: 호버 미지원 */
@media (hover: none) and (pointer: coarse) {
  ~~~~~~~
}

// pointer 
// 1. fine : 정교한 포인팅 장치 (마우스, 스타일러스 펜 등)
// 2. coarse : 포인팅이 덜 정교한 장치 (터치스크린)
// 3. none : 포인팅 장치가 없음 (키보드 전용 디바이스) 

---

참고 및 출처 :
ChatGPT

https://coding-factory.tistory.com/938

[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹)