HTML DOM MouseEvent clientY 속성이란?
HTML DOM의 MouseEvent clientY 속성은 마우스 이벤트가 발생한 시점에 마우스 포인터의 세로(Y) 좌표를 반환합니다. 이때 좌표는 브라우저 뷰포트, 즉 현재 화면에 보이는 영역의 왼쪽 상단 모서리를 원점(0, 0)으로 하여 픽셀 단위로 측정됩니다.
clientX 속성과 함께 사용하면 가로(X) 좌표까지 함께 얻을 수 있습니다. 두 속성을 조합하면 마우스 위치 추적, 드래그 앤 드롭, 커스텀 툴팁, 미니게임 등 다양한 인터랙티브 기능을 손쉽게 구현할 수 있습니다.
문법(Syntax)
clientY 속성은 읽기 전용(read-only)이며, MouseEvent 객체에서 다음과 같이 참조하여 사용합니다.
MouseEventObject.clientY
반환값은 픽셀(px) 단위의 숫자(Number) 타입입니다.
유사 좌표 속성과의 차이
- clientY — 뷰포트(브라우저 화면) 기준의 Y 좌표
- pageY — 문서 전체 기준의 Y 좌표 (스크롤 거리 포함)
- screenY — 물리적 모니터 화면 기준의 Y 좌표
페이지가 스크롤된 상태에서도 clientY는 항상 현재 보이는 화면을 기준으로 값을 반환하므로, 스크롤 위치와 무관한 좌표가 필요할 때 적합합니다.
예제: clientX·clientY로 만드는 미니게임
아래 예제는 mousemove 이벤트와 clientX, clientY 속성을 활용한 간단한 게임입니다. 초록색(안전) 영역 안에서 커서를 수평으로 이동시켜 목표 지점(x = 439)에 도달하면 성공하고, 빨간색(위험) 영역에 진입하면 실패하는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientY</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type='button'] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientY</legend>
<div id='outer'>
<div id='upper'><h2>Danger</h2></div>
<div id='lower'><h2>Danger</h2></div>
</div>
<input type='button' id='start' value='Start' onclick='gameStart()'>
<div id='divDisplay'></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You lose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>실행 결과
1. 'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역 내부에 있을 때 — 'Keep Going!' 메시지가 표시되며 게임이 계속 진행됩니다.
2. 커서가 초록색(안전) 영역의 끝 지점에 도달했을 때 — 'Congrats! You Did it!' 메시지와 함께 게임이 성공적으로 종료되고, mousemove 이벤트 리스너가 제거됩니다.
3. 커서가 빨간색(위험) 영역에 진입했을 때 — 'You moved to DANGER area. You lose!' 메시지가 표시되며 게임에서 패배합니다.
마무리 정리
MouseEvent의 clientY 속성은 마우스 이벤트 발생 시 포인터의 세로 좌표를 뷰포트 기준으로 반환하는 읽기 전용 속성입니다. clientX와 함께 사용하면 2차원 좌표를 손쉽게 얻을 수 있으며, 이를 활용하면 마우스 움직임에 반응하는 다양한 웹 인터랙션을 구현할 수 있습니다. Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 모두 지원되므로 호환성 걱정 없이 사용할 수 있습니다.