    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>mousedown과 mouseup 사용하기</title>
      <link rel="stylesheet" href="style_js.css">
      <style>
        body { text-align: center; }
        #largerImage { transition: transform 1s linear; }
      </style>
    </head>
    <body>
      <h4>마우스 버튼을 누르고 유지하세요</h4><hr>
      <img id="largerImage" src="../media/photo4.jpg" width="50%">
      <script>
        let image = document.getElementById("largerImage");
        image.onmousedown = larger;
        image.onmouseup = back;

        function larger() {
          image.style.transform = "scale(2, 2)";
        }
        function back() {
          image.style.transform = "scale(1, 1)";
        }
      </script>
    </body>
    </html>