[css] hover로 색 바꾸기

안녕하세요. 플입니다.

오늘은 hover를 이용해

마우스 오버 시 색을 변경해보겠습니다.

---

▷hover

 

hover는

'맴돌다'라는 뜻을

가진 영어단어입니다.

 

마우스가 위에서

맴돌고 있을 때라고

이해할 수 있습니다.

 

저는 마우스 오버 시

적용되는

css로 생각하고

작업합니다.

 

▷사용 이유

 

hover를 사용하는 건

사용자의 편의를 위해

들어가는 효과입니다.

 

마우스를 올렸을 때

어떤 효과가 적용되거나

마우스의 모양이 손가락 모양이 되면

 

사용자들은

'클릭을 하는 부분'이라는 것을

직감적으로 알게 됩니다.

 

오늘 예시로 사용할

메뉴 색상을 변경하는 것을 살펴보면

 

마우스를 올렸을 때

색상이 변경되면

사용자는 클릭하는 부분이라는 것을

쉽게 알 수 있습니다.

 

이처럼 사용자의

클릭을 유도해

조금 더 쉽게 홈페이지를

이용할 수 있도록 도와주는 기능으로

많이 사용합니다.

 

---

 1.  메뉴 준비

 

우선 hover를 

적용할 메뉴를

준비합니다.

 

저는 css코딩이 끝난

메뉴를 가져왔습니다.

 

hover는

복잡하게 들어가지 않고

색상만 변경해줘도

충분하다고 생각합니다.

 

그래서 일단

디자인을 미리 잡아둡니다.

 

오늘은 메뉴에 들어간

css는 생략하겠습니다.

 

---

 2.  메뉴에 hover 적용

a:hover{ color:#ffc045; }

hover는 적용할 태그 뒤에

: + hover를 적습니다.

 

그리고 다른 css처럼

{}(중괄호) 안에

데이터를 적어줍니다.

 

저는 간단하게

컬러만 변경해봤습니다.

 

 Tip)  color 

 

color는 폰트의 

색상을 변경하는

css 속성입니다.

 

이렇게 메뉴에

마우스를 올렸을 때

 

hover에 적용한 색으로

변경되는 걸 확인할 수 있습니다.

 

---

이렇게 hover를

적용한 메뉴를

만들어봤습니다.

 

그럼 이만.

총총.