Window & Document object

브라우저에서 js 코드를 실행하면, 최상위 객체로 윈도우 객체가 만들어진다. 윈도우 객체의 유용한 property와 method에는 무엇이 있는지 알아보자. 

Window Object 

Size 

모니터의 사이즈 | 콘솔에 위의 코드를 입력하면 모니터의 width와 height 값이 포함되어있는 "Screen"이라는 객체를 확인할 수 있다. 

 

window.screen;

 

브라우저의 사이즈 | 브라우저 사이즈의 너비와 높이를 나타내는 데이터는 크게 outer와 inner로 나누어진다.

1. outer는 전체 브라우저 창의 사이즈를 나타내는 값인데, 여기에는 웹 페이지를 나타내는 Document 파일뿐만 아니라 주소 검색창, 페이지 탭, 스크롤 바가 포함되어있다. 따라서 우리가 창의 크기를 조정하면 줄어들거나 늘어난다.
2. inner는 outer값에서 주소검색창과 페이지 탭을 제외한 값을 말한다. 만약 브라우저에서 개발자 도구를 사용하고 있다면, 이 부분도 제외된다. 

window.outerWidth;
window.outerHeight;

window.innerWidth
window.innerHeight;

 

innerWidth(646)는 outerWidth(1120)에서 개발자 도구 창의 너비만큼이 제외된 값이고, innerHeight(615)은 outerHeight(735)에서 페이지 탭과 주소창의 높이 만큼이 제외된 값이다.

 

Scroll 

윈도우 객체에 있는 scroll 함수들을 이용하면 우리가 함수에 전달한 값으로 스크롤을 이동시킬 수 있다. 

 

1. scrollTo(x, y) | 전달한 좌표로 스크롤을 이동시킬 수 있다. document의 요소로 스크롤을 이동시키는 DOM API(scroll-IntoView)가 있기 때문에 자주 사용할 것 같지는 않다.
2. scrollBy(x, y) | 전달한 값(x, y)만큼씩 스크롤을 이동시킬 수 있다. 
   • 아래 예제는 y축 방향으로, 윈도우에서 보여지는 웹 페이지의 높이(innerHeight)만큼 스크롤을 이동시킬 수 있다.

window.scrollBy(0, window.innerHeight);

 

Document Object 

Size & Coordinates 

documentElement | 브라우저의 주소 창, 페이지 탭, 개발자 도구, 그리고 스크롤까지 전부 제외한 순수 웹 페이지 문서(html)의 사이즈 데이터를 알 수 있다.

 

document.documentElement.clientWidth;
document.documentElement.clientHeight;

 

 

getBoundingClientRect | 우리가 지정한 DOM 요소(버튼, 이미지...)의 사이즈 정보 뿐만 아니라 좌표 정보를 알 수 있다. 

 

const specialBox = document.querySelector('.special');

specialBox.getBoundingClientRect();

 

width와 height은 각각 우리가 지정한 element의 너비와 높이 사이즈에 해당한다. 나머지는 사이즈가 아니라 좌표 데이터에 해당된다. 

 

Scroll

scrollTo | 어떻게 쓰는 건지 잘 이해가 안된다. 스크롤이 이동을 안해......

 

element.scrollIntoView | 해당 요소가 화면에 보일 수 있도록 스크롤을 이동시킨다. 이 때 스크롤을 어떻게 이동시킬 것인지(behavior), 요소가 브라우저의 어느 위치에(최상단, 가운데, 하단...)있게 할 것인지 등을 옵션으로 조정할 수 있다.

 

button.scrollIntoView({
  behavior: "smooth", 
  block: "end", 
  inline: "nearest"
});