[CSS]_프론트엔드의 꽃 :hover

hover란?

가상 클래스(Pseudo Class)의 한 종류입니다.

그렇다면 가상클래스는 또 뭘까요?

특정한 상태를 가진 요소를 선택하여 스타일을 적용하는 선택자 입니다.

유저와의 상호작용에 따라 요소의 상태를 선택하여 스타일을 변경할 때 사용합니다.

hover의 역할은 마우스를 롤오버 했을 때, 요소의 상태를 변경하는 것입니다.

(롤오버? 마우스를 요소 위에 올려둔다는 말입니다.)

그리고 사용할 때는 ( : ) 콜론을 붙입니다.

button:hover {
    background-color : red;
}

 

그렇다면 이 호버 기능을 사용하는 이유가 뭔지 생각해보겠습니다.

보통 마우스를 통해 웹과 상호작용을 하게 되는데요.

그럴때마다 보여질 효과를 적용하기 위해 hover를 사용하게 됩니다.

UX 관점에서 보면, 마우스를 올려놓았을 때를 유저에게 확실히 인식시키기 위함입니다.

유저에게 할 수 있는 일을 간접적으로 일러주는 것이죠.

텍스트 입력

위 사진에서처럼 마우스 커서를 변경시킴으로써 유저에게 텍스트입력이 가능함을 알려주는 것이죠.

이렇게 유저에게 어떤 행동을 하게끔 유도하거나, 할수 있음을 알릴때 사용하는 유용한 기능입니다.

---

실습

실제 예제를 만들어서 실습을 해보겠습니다.

vscode까지 실행하기 귀찮을 때는 코드펜을 이용해서 쉽게 구현해볼 수 있습니다.

https://codepen.io/pen/

Create a New Pen

 

 

기본버튼

See the Pen Untitled by filljung (@filljung) on CodePen.

button태그를 이용한 기본 버튼을 만들어 보았습니다.

우리가 이 버튼을 볼때는 평범하지만

마우스를 올려놓는다면 버튼 모양이 조금 달라지면서 누를 수 있는 것처럼 바뀝니다.

 

 

기본버튼(커스텀)

하지만 우리가 사용하는 웹에서는 기본적인 버튼이 아닌
다양한 모양으로 버튼이 커스텀 되어 있는데요.

간단하게 버튼을 커스텀 해주고 이어서 hover 기능도 적용해보겠습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

 

이제 이 버튼에 마우스를 롤오버 해도 이전처럼은 상호작용하지 못하고 있습니다.

 

 

기본버튼(커서모양)

그럼 이제 다시 버튼에 마우스를 올려두면 커서 모양이 바뀌도록 커스텀 하겠습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

css에서 cursor 속성을 하나 사용한 것 뿐인데 벌써 누르고 싶어지지 않나요?

 

 

커서모양 종류

잠깐 이 cursor에는 어떤 손 모양 들이 있는지 살펴보고 오겠습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

 

css 파일을 확인해보았을 때,

cursor에 주어진 속성에 따라 마우스의 모양도 달라지는 것을 볼 수 있습니다.

 

 

기본버튼(버튼모양변경)

그럼 이어서 바로 버튼의 모양도 바뀌도록 효과를 적용해주겠습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

 

box-shadow라는 속성과 글자의 굵기만 더했을 뿐인데,

이전보다도 더 누르고 싶어지지 않나요?

이렇게 hover를 사용해서 속성을 추가하면

롤오버했을 경우 보여질 효과를 적용할 수 있습니다.

 

 

그외 예시

그 외에도 이런 식으로 메뉴바에서도 활용할 수 있습니다.

See the Pen Untitled by filljung (@filljung) on CodePen.

 

---

 

자 이렇게 오늘 hover라는 가상클래스 선택자에 대해서 배워보았습니다.

이후에도 잘 활용해서 웹페이지를 완성해보세요!

 

LK-99 === superconductor ? true : false