<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wheel 이벤트 사용하기</title> <link rel="stylesheet" href="style_js.css"> <style> body { text-align: center; overflow: hidden; } </style> </head> <body> <h4>마우스의 휠을 돌려보세요</h4><hr> <img id="largerImage" src="../media/photo5.jpg" width="320" height="210"> <script> const image = document.getElementById("largerImage"); let wb = 320, hb = 210; document.addEventListener('wheel', (event) => { event.preventDefault(); // 기본 스크롤 이벤트 제거 if (event.deltaY < 0) { wb = wb * 1.1; hb = hb * 1.1; } else { wb = wb / 1.1; hb = hb / 1.1; } image.style.width = wb + 'px'; image.style.height = hb + 'px'; }); </script> </body> </html>