본문 바로가기
IT 개발

엘리먼트의 위치 값을 알아내는 getBoundingClientRect()와 Math.random으로 랜덤한 숫자 만들기

by takoapps 2021. 6. 28.

자바스크립트 강의 들으면서 위치를 이용해서 함수를 만드는 상황이 많이 생긴다.
엘리먼트의 width, height 또는 위치 관련된 값을 가져오고 싶다면
getBoundingClientRect() 를 사용하여 정보를 얻어올 수 있다.

 

Rect = element.getBoundingClientRect();

 

여기서 Viewport는 사용자에게 보이는 화면이며
x,y가 (0,0)으로 좌측 상단을 기준으로 한다.

getBoundingClientRect()를 Rect라는 변수에 먼저 할당하고
const x = Rect.width
const y = Rect.height
으로 x,y 축 높이와 너비를 할당할 수 있다.

 

function randomNum(min, max) {
return Math.random() * (max - min) + min;}

 

만약 0에서부터 위와 같은 x,y의 값 사이에 있는 랜덤 한 숫자를 얻고 싶다면 위의 문법을 대입하여 두 사이에서 랜덤 한 수가 나오도록 만들 수 있다. Math.random을 이용하여 max값과 min값을 대입해 주면 된다. 참고로 max값이 5라면 5는 포함되지 않고 4 또는 4.%% 의 소숫자가 포함된 max값 이하의 값이 포함된다.

(Math.random이 아닌 Math.round도 있지만 이를 사용하면 난수가 고르게 분포되지 않는다고 한다.)


위의 randomNum 함수를 이용하여 각 min, max 값을 대입해 준다

 

const x = randomNum(x, x1);
const y = randomNum(y, y1);

 

그리고 box라는 새로운 엘리먼트를 생성하여

 

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

 

으로 box 엘리먼트에 left, top 값을 지정해 주면 끝!

 

 

 

Ref

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

반응형