메소드 정리 1

Math.round()

입력값을 반올림한 수와 가장 가까운 정수 값을 반환한다.

console.log(Math.round(0.9));
// expected output: 1

console.log(Math.round(5.95), Math.round(5.5), Math.round(5.05));
// expected output: 6 6 5

console.log(Math.round(-5.05), Math.round(-5.5), Math.round(-5.95));
// expected output: -5 -5 -6

Math.ceil()

입력값의 소수 값을 올린 정수 값을 반환한다.

Math.floor()

입력값의 소수 값을 내린 정수 값을 반환한다.

Element.getBoundingClientRect()

특정 엘리먼트의 위치 값을 반환한다.

<img id="test" src="my_img.jpg" />

const ele = document.querySelector('#test');
const imgRect = ele.getBoundingClientRect();

console(imgRect);

// 출력결과
{
  bottom: 178 //아래쪽 margin을 빼고 모두 더한 값
  height: 44 //margin값을 제외한 border, padding, height를 더한 값
  left: 212.5 //꼭지점기준으로 공간
  right: 1092.5 //오른쪽 margin을 빼고 모두 더한 값
  top: 134 //꼭지점기준으로 공간
  width: 880 //margin값을 제외한 border, padding, witdth 더한 값
  x: 212.5 //Element 위치
  y: 134 //Element 위치
}