onmouseover 속성이란?
onmouseover 속성은 마우스 포인터가 특정 요소 위로 이동하는 순간 지정된 스크립트를 실행할 수 있게 해주는 이벤트 속성입니다. 버튼, 링크, 텍스트 등 다양한 HTML 요소에 적용할 수 있으며, 사용자의 마우스 동작에 즉각적인 시각적 반응을 제공하고 싶을 때 유용하게 활용됩니다.
웹 페이지의 배경색을 변경하려면 JavaScript에서 제공하는 HTML DOM의 backgroundColor 속성을 함께 사용하면 됩니다.
기본 구현 예제
다음은 onmouseover 속성과 backgroundColor 속성을 사용하여 배경색을 변경하는 간단한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Heading Two</h2> <a onmouseover="document.body.style.backgroundColor ='orange'">Hover over me to change the background color.</a><br> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같이 기본 흰색 배경의 페이지가 나타납니다.
이제 텍스트 위에 마우스를 올려보면, 웹 페이지 전체의 배경색이 주황색(orange)으로 즉시 변경되는 것을 확인할 수 있습니다.
동작 원리 살펴보기
예제 코드의 핵심 부분을 분석해 보겠습니다.
- onmouseover: 마우스가 <a> 요소 위에 올라오는 순간 이벤트가 발생합니다.
- document.body.style.backgroundColor: 문서의 body 요소 스타일에 접근하여 배경색 값을 설정합니다.
- 'orange': 적용할 색상 값으로, 색상 이름 외에도 HEX 코드(#ffA500)나 RGB 값(rgb(255, 165, 0))을 사용할 수 있습니다.
응용 팁: 마우스가 떠날 때 원래 색상으로 되돌리기
onmouseover만 사용하면 한 번 색상이 변경된 후 그대로 유지됩니다. 마우스가 요소를 벗어났을 때 원래 배경색으로 복원하려면 onmouseout 속성을 함께 사용하면 됩니다.
<a onmouseover="document.body.style.backgroundColor='orange'" onmouseout="document.body.style.backgroundColor=''"> 마우스를 올려보세요! </a>
이처럼 onmouseover와 onmouseout 이벤트를 조합하면 마우스 움직임에 따라 자연스럽게 반응하는 인터랙티브한 웹 페이지를 손쉽게 만들 수 있습니다.