무료폰트 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[소스] Background 속성을 이용한 마우스오버 이미지

2018.05.08
객체에 마우스를 올렸을 때 글꼴, 글자크기, 색상, 이미지등 다양한 변화를 통해 좀더 생동감있는 홈페이지를 제작할 수 있다.
요즘에는 웹사이트를 모바일로 많이 보기때문에 터치를 사용하는 모바일에서는 사실상 마우스오버효과가 무의미해졌다.
하지만 아직까지도 PC이용자 비율이 많기 때문에 홈페이지를 제작함에 있어서 마우스오버 효과는 아주 유용하게 쓰인다.
마우스오버 효과는 정말 다양한 방법으로 표현할 수 있는데, 그 중 CSS의 background와 hover를 이용하여 객체에 마우스를 올렸을 때 배경이미지가 바뀌는 효과를 만들어 볼 것이다.

데모페이지

이 포스트 공유하기

글수정  글삭제 전체목록