<div>
  <p>마우스를 움직여보세요!</p>
  <p id="direction"></p>
</div>
p {
  font-size: 2rem;
  font-weight: bold;
}

#direction {
  font-size: 1.8rem;
  font-weight: 500;
}

/* ----------- */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  box-sizing: border-box;  
  font-family: Pretendard;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
let prevX = 0, prevY = 0;
const $target = document.querySelector("#direction");

const getMouseDirection = (e) => {
  const xDir = prevX <= e.pageX ? "right" : "left";
  const yDir = prevY <= e.pageY ? "down" : "up";
  
  prevX = e.pageX;
  prevY = e.pageY;
  
  $target.innerHTML = `좌우: ${xDir} 상하: ${yDir}`;
}

window.addEventListener("mousemove", getMouseDirection);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.