바닐라 JavaScript(외부 라이브러리 없이 순수한 JavaScript)만으로 마우스를 움직였을 때 웹사이트의 배경색이 바뀌도록 만드는 방법을 알아봅니다.
HTML
먼저 간단한 HTML 페이지의 마크업부터 살펴보겠습니다:
<!DOCTYPE html>
<html>
<body>
<h1>이 페이지 위에서 마우스를 움직여 보세요</h1>
</body>
</html>JavaScript
사용자가 페이지의 어느 곳에서든 마우스를 움직일 때 배경색이 변경되도록 하려면 다음 세 가지 작업이 필요합니다.
<body>요소를 선택하고 해당 요소에 대한 참조를 변수에 저장합니다.window객체에mouseover이벤트를 감지하는 이벤트 리스너를 등록합니다.backgroundColor속성에 원하는 색상 값을 적용합니다.
다음 코드를 JavaScript 파일에 추가하세요.
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})이제 사용자가 웹사이트의 어디든 마우스를 움직이는 즉시 배경색이 빨간색으로 바뀝니다.
실제 동작은 코드 데모를 통해 확인할 수 있습니다.
색상 값 지정하기
색상 값은 색상 이름(예: "red"), hex 코드, 또는 rgba 값 중 어떤 방식으로든 지정할 수 있습니다. 예를 들어 #ff0000이나 rgba(255, 0, 0, 1)처럼 작성하면 됩니다.