[DOM] JavaScript를 사용하여 도형 조작하기

도형 요소 선택

도형을 조작하기 위해 먼저 해당 도형 요소를 선택해야 합니다. 아래코드는 #rect ID로 도형 요소를 선택합니다.

let myRect = document.querySelector("#rect");

마우스 이벤트로 도형 모양 변경

이제 JavaScript를 사용하여 마우스 이벤트를 적용하여 도형 모양을 변경할 수 있습니다. 아래 코드는 mouseover 이벤트와 mouseout 이벤트를 사용하여 도형의 배경색과 모양을 변경 합니다.

myRect.addEventListener("mouseover", function () {
    // 마우스가 위로 올라가면 실행되는 함수
    myRect.style.backgroundColor = "green"; // 배경색을 녹색으로
    myRect.style.borderRadius = "50%"; // 둥근 사각형 모양으로 변경
});

myRect.addEventListener("mouseout", function () {
    // 마우스가 밖으로 나가면 실행되는 함수
    myRect.style.backgroundColor = ""; // 배경색 원래대로
    myRect.style.borderRadius = ""; // 모양 원래대로
});

이렇게 JavaScript를 활용하여 마우스 이벤트를 통해 도형의 모양을 동적으로 변경할 수 있습니다. 이러한 방법을 통해 웹 페이지 디자인을 더 흥미롭게 만들수 있으며 사용자와의 상호작용을 개선할 수 있습니다.