마우스가 있는 디바이스에서만 hover 효과 적용하는 3가지 방법 (hover · media query · pointer 비교)
CSS 26.02.06 조회 30마우스가 있는 디바이스에서만 hover 효과 적용하는 3가지 방법 (hover · media query · pointer 비교)
터치 디바이스에서는 hover를 막고, 마우스 환경에서만 UX를 살리는 CSS 전략
✅ 핵심 속성
:hover
@media(hover:hover)
@media(hover:hover) and (pointer: fine)
➰➰➰
✅ 왜 hover를 다시 생각해야 할까?
· 웹에서 hover 효과는 너무나 자연스럽게 사용됩니다.
· 보통은 아래처럼 간단하게 작성하죠.
1 | .item:hover {transform: translateY(-10px);} | cs |
하지만 모바일이나 태블릿 같은 터치 디바이스에서는 상황이 달라집니다.
hover는 “마우스가 올라간 상태”를 전제로 하기 때문에, 터치 환경에서는 의도치 않은 UX 문제를 만들 수 있습니다.
그래서 이번 글에서는 마우스가 있는 디바이스에서만 hover 효과를 적용하는 방법을 총 3단계로 나누어 비교해보려고 합니다.
✅ :hover만 사용하는 가장 기본적인 방식
· 작성이 가장 간단하며 모든 브라우저에서 동작합니다.
· 하지만 터치(모바일) 디바이스에서도 hover 상태가 남을 수 있어 UX제어가 불가능하다는 단점이 있습니다.
1 | .item:hover {transform: translateY(-10px);} | cs |
✅ @media (hover: hover)로 hover 가능한 환경만 구분
· hover : hover
→ hover가 가능한 입력 장치가 있는 환경
· css만으로 디바이스 환경 분기가 가능하며 모바일 UX 안정성이 향상됩니다.
· 하지만 'hover 가능 여부'까지만 판단하여, 마우스 등 구분이 불가합니다.
1 2 3 | @media (hover: hover) { .item:hover {background-color: #000;} } | cs |
✅ pointer까지 함께 사용한 가장 정교한 방식
· pointer : fine → 마우스, 트랙패드 (정밀한 포인터)
· pointer : coarse → 손가락 터치
· 실제 마우스 환경에서만 hover를 적용하여 가장 명확한 UX 제어가 가능합니다.
1 2 3 | @media (hover: hover) and (pointer: fine) { .item:hover {background-color: #000;} } | cs |
✅ 어떤 방식을 선택하는 게 좋을까?
· PC 중심의 단순 사이트 → @media (hover: hover)
· 모바일 UX를 중요하게 보는 서비스 → @media (hover: hover) and (pointer: fine)
➰➰➰
작은 CSS 조건 하나가 모바일 UX, 접근성, 사용자 만족도를 크게 바꿀 수 있습니다.
디자인키트는 이처럼 실무에서 바로 쓰이는 UI·UX 전략을 계속 정리해보려 합니다.
