오늘은 JS 좌표와 관련된 공부를 했다.
pageX,pageY,clientX,clientY 등등~
공부만 하면 재미없으니 마우스커서를 따라다니는 요소를 만들었다.
핵심기능들은 아래와 같다.
CSS : transform : translate()
JS : eventlistener의 mousemove + eventlistener에 내재되어 있는 clientX와clientY
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>coordinate</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='dot'>
<p id='coords'>1,1</p>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>
</html>HTML 코드
화면에 비춰줄 div태그와, p태그를 추가, 각각 dot, coords라는 id 값을 주었다.
body {
background-color: #000;
width: 100%;
height : 100vh;
}
#dot {
width : 50px;
height : 50px;
border-radius: 50%;
background-color: #eee;
position: absolute;
top : -25px;
left : -25px;
transform: translate(-50%,-50%);
}
#coords {
width: 200px;
color : red;
position : absolute;
bottom: 0;
left: 0;
font-size: 24px;
margin-left: 72px;
}CSS 코드
dot 요소가 커서 가운데로 위치할 수 있도록 transform: translate를 이용해서 넓이와 높이의 절반값만큼 당겨준다.
그리고 현재 위치값을 보여줄 coords 요소는 dot의 오른쪽에 대충 위치할 수 있도록 해주었다.
const dot = document.getElementById('dot');
const coords = document.getElementById('coords');
document.addEventListener('mousemove', (e) => {
const x = e.clientX;
const y = e.clientY;
dot.style.transform=`translate(${x}px, ${y}px)`;
coords.innerText = `${x}px, ${y}px`;
})JS 코드
- dot, coords 요소를 getElementById를 통해 불러온다. ( querySelector도 사용 가능 )
- window에 '사용자가 마우스를 움직일 때 (mousemove)' 이벤트를 추가해 준다.
- mouse event의 clientX, clientY 속성값을 이용해 사용자의 커서의 위치값을 받는다.
- dot 요소에 style -> transform=`translate(${x}px, ${y}px)` 속성을 사용해서 요소가 사용자의 커서를 따라다닐 수 있도록 한다.
- 마지막으로 innerText를 이용해 coords 요소에 사용자의 커서값을 숫자로 표기한다.
'코딩 리뷰 > [HTML, CSS , JS]' 카테고리의 다른 글
| [HTML, CSS, JS] Animation 효과로 눈내리는 배경화면 만들기 (4) | 2023.05.19 |
|---|---|
| [HTML, CSS, JS] scrollIntoView와 scrollBy를 이용한 섹션 이동 (2) | 2023.05.18 |
| [HTML, CSS, JS] 유튜브 클론코딩 리뷰 (0) | 2023.04.26 |
| [HTML, JS] 멀티 Select 공부 리뷰 (0) | 2023.04.14 |
| [HTML, CSS, JS] 모멘텀 클론코딩 리뷰 (0) | 2023.04.12 |