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

자바스크립트 강의 들으면서 위치를 이용해서 함수를 만드는 상황이 많이 생긴다.
엘리먼트의 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