TIL - Browser coordinates

khg04170ยท2021๋…„ 7์›” 16์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
3/8
post-thumbnail

โ˜„๏ธ Browser coordinates

๐Ÿ“coordinates


๐Ÿ‘‰ ํ•ญ์ƒ ๊ธฐ์ค€์ ์€ ์™ผ์ชฝ ์ƒ๋‹จ (0,0)์œผ๋กœ ์‹œ์ž‘.
๐Ÿ‘‰ ๋ธŒ๋ผ์šฐ์ €์˜ right, bottom์€ CSS์™€ ๋‹ค๋ฆ„. ๋ธŒ๋ผ์šฐ์ €์˜ ์ขŒํ‘œ๋Š” ๋ฌด์กฐ๊ฑด ์ขŒ์ธก ์ƒ๋‹จ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ํŽธํ•จ.

๐Ÿ“Get the coordinates with element.getBoundingClientRect()

๐Ÿ‘‰ DOM์— ๋“ค์–ด์žˆ๋Š” ๋ชจ๋“  ์š”์†Œ๋“ค (img,tag ๋“ฑ) == element!
๐Ÿ‘‰ ๋”ฐ๋ผ์„œ ๋ชจ๋“  element๋“ค์€ .getBoundingClientRect() ์‚ฌ์šฉ๊ฐ€๋Šฅ.
๐Ÿ‘‰ (์˜ˆ)img.getBoundingClientRect() ํ˜ธ์ถœ ์‹œ img์˜ width, height, top, left, bottom, right ๋“ฑ ์œ„์น˜ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“clientX,Y VS pageX,Y (ํ™•์‹คํ•˜๊ฒŒ ์•Œ์•„๋‘˜๊ฒƒ..)

clientX,Y ( ํ—ท๊ฐˆ๋ฆผ..)

๐Ÿ‘‰ ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋Š” ํŽ˜์ด์ง€์— ์ƒ๊ด€์—†์ด ๋ธŒ๋ผ์šฐ์ € ์œˆ๋„์šฐ ์ฐฝ์—์„œ,XY๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋–จ์–ด์ ธ์žˆ๋Š”์ง€์˜ ๊ฐ’

pageX,Y( ํ—ท๊ฐˆ๋ฆผ..)

๐Ÿ‘‰ ๋ฐ˜๋Œ€๋กœ, ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ ์•„๋‹ˆ๋ผ, ๋ฌธ์„œ์˜ ์‹œ์ž‘์ ๋ถ€ํ„ฐ XY๊ฐ’์ด ๊ณ„์‚ฐ๋œ๋‹ค. ํŽ˜์ด์ง€ ์ž์ฒด์—์„œ ๋–จ์–ด์ง„ XY๊ฐ’์„ ๋งํ•จ. ์šฐ๋ฆฌ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š๋Š” ์Šคํฌ๋กค ์ตœ์ƒ๋‹จ์—์„œ๋ถ€ํ„ฐ !

๐Ÿ“clientX,Y VS pageX,Y ์‹ค์Šต

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
			}

			body {
				background-color: black;
			}
			div {
				display: block;
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-bottom: 20px;
			}
			.special {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="special"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<script>
			const special = document.querySelector(".special");
			special.addEventListener("click", (event) => {
				console.log(special.getBoundingClientRect());
				console.log(`client : ${event.clientX},${event.clientY} `);
				console.log(`page : ${event.pageX},${event.pageY}`);
			});
		</script>
	</body>
</html>

mousemove๋ ๋•Œ๋งˆ๋‹ค ๋ณ€ํ•˜๋Š” ์ขŒํ‘œ๊ฐ’

JS only

const verticalEl = document.querySelector(".vertical");
const horizontalEl = document.querySelector(".horizontal");
const tagEl = document.querySelector(".tag");
const targetEl = document.querySelector(".target");

document.addEventListener("mousemove", (event) => {
	const x = event.clientX;
	const y = event.clientY;
	console.log(x, y);

	verticalEl.style.left = `${x}px`;
	horizontalEl.style.top = `${y}px`;

	targetEl.style.top = `${y}px`;
	targetEl.style.left = `${x}px`;

	tagEl.style.top = `${y}px`;
	tagEl.style.left = `${x}px`;
	tagEl.innerHTML = `${x}px, ${y}px`;
});

์ฐธ๊ณ ์ž๋ฃŒ
์ขŒํ‘œhttps://ko.javascript.info/coordinates

๋“œ๋ฆผ์ฝ”๋”ฉ ํ”„๋ก ํŠธ์—”๋“œ ํ•„์ˆ˜ ๋ธŒ๋ผ์šฐ์ € 101 - 2.5 ์ •๋ง ์ค‘์š”ํ•œ ๋ธŒ๋ผ์šฐ์ € ์ขŒํ‘œ

profile
Hello all ๐Ÿ‘‹๐Ÿป ๐Ÿ“London

0๊ฐœ์˜ ๋Œ“๊ธ€