호버Hover
한 줄 정의
호버는 방문자가 마우스 커서를 버튼이나 링크 위에 올려놓았지만 아직 누르지는 않은 상태, 또는 그때 바뀌는 화면 모양을 가리키는 말이에요.
쉽게 말하면
쇼핑몰에서 마우스를 상품 사진 위에 올리면 사진이 다른 각도로 바뀌거나, 버튼 위에 올리면 버튼 색이 살짝 진해지는 경우가 있어요. 이렇게 커서를 올려놓았을 때 생기는 변화가 호버예요. 호버로 모양이 바뀌면 방문자는 누르기 전에 "이건 누를 수 있구나" 하고 알 수 있어요.
어디서 나온 말인가요
호버는 웹페이지의 모양을 정하는 언어인 CSS의 표준에 :hover라는 이름으로 정의된 상태예요. 웹 표준을 만드는 국제 단체 W3C의 선택자 표준 문서는 :hover를 커서 아래에 있는 요소에 해당하는 상태로 설명해요(W3C Selectors Level 4).
잘 쓰려면
휴대폰이나 태블릿처럼 손가락으로 쓰는 화면에는 마우스 커서가 없어요. 기기가 손가락을 화면 위에 띄워 둔 상태를 알 수 없으니, 호버 때만 나타나는 설명이나 메뉴는 휴대폰 방문자에게 보이지 않을 수 있어요. 그래서 꼭 전해야 하는 정보는 호버에만 담지 말고 처음부터 화면에 보이게 둬요.
호버 때 버튼 크기나 위치가 바뀌면 커서가 지나가기만 해도 주변 내용이 움직일 수 있어요. 색이나 그림자처럼 자리를 바꾸지 않는 변화를 쓰면 화면이 출렁이지 않아요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 호버와 다른 점 |
|---|---|---|
| 액티브 | 버튼을 누르고 있는 순간의 상태 | 호버는 커서를 올려놓기만 한 상태이고, 액티브는 실제로 누르는 순간이에요 |
| 포커스 | 키보드 등으로 선택돼 다음 입력을 받을 준비가 된 상태 | 호버는 마우스 커서의 위치를 따르고, 포커스는 키보드나 클릭으로 고른 요소에 머물러요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
마우스 오버Hover
