한눈에 보는 정의
마우스 포인터를 요소 위에 올렸을 때 색·크기·그림자 등이 바뀌어 반응을 보여 주는 효과.
이런 말로 들어요
- 버튼에 호버 효과를 넣어서 누를 수 있는 게 더 잘 보이게 했어요.
- 모바일에서는 호버가 없어서 설명이 안 보이는 문제가 있네요.
그림으로 보기
호버 효과는 누를 수 있다는 신호를 줍니다. 마우스가 없는 휴대폰과 키보드 사용자도 고려해 중요한 내용을 호버에만 숨기지 않습니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
마우스를 올리거나 Tab 키로 이동해 보세요. 키보드 포커스에도 같은 효과가 나옵니다.
자세히 알아보기
호버 효과는 "이건 누를 수 있다"는 신호를 줍니다. 버튼 색이 조금 진해지거나, 카드가 살짝 떠오르는 식으로 씁니다. CSS의 :hover 선택자로 만들고, transition을 함께 쓰면 부드럽게 바뀝니다. 다만 휴대폰처럼 마우스가 없는 기기에는 "올려놓기"가 없으므로, 중요한 정보나 기능을 호버에만 숨겨 두면 안 됩니다.
실무 예시
예를 들어 서비스 카드에 마우스를 올리면 그림자가 진해지고 2~4px 위로 떠오르게 하되, 카드 설명과 "자세히" 링크는 처음부터 보이게 둡니다.
함께 살펴볼 점
키보드 사용자는 마우스를 쓰지 않으므로 같은 효과를 :focus-visible에도 줘야 합니다. 움직임이 큰 효과는 동작 줄이기 설정을 켠 사용자에게 줄여 줍니다.
AI에게 이렇게 요청해 보세요
서비스 카드에 호버 효과를 넣어 줘. 마우스를 올리면 그림자가 진해지고 4px 위로 뜨게, 키보드 포커스에도 같은 효과가 나오게, prefers-reduced-motion이면 움직임 없이 색만 바뀌게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- :hover - MDN Web Docs 새 창
포인터가 요소 위에 있을 때 스타일을 바꾸는 :hover 선택자를 확인했습니다.
자료 확인 - hover media feature - MDN 새 창
사용자의 주 입력 장치가 호버를 지원하는지 확인하는 미디어 기능을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정