티스토리 뷰
목차
1. Element.getBoundingClientRect()
2. MouseEvent - client X/Y 와 page X/Y 비교
3. 윈도우 사이즈
4. Window.scrollX, Window.scrollY
1. Element.getBoundingClientRect()
정의
The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
의역: Element.getBoundingClientRect() 메서드는 요소의 크기와 뷰포트에 대한 상대적인 위치에 대한 정보를 제공하는 DOMRect 개체를 반환한다.
즉, Element의 위치와 크기 등의 정보를 알고 싶을 때 이 메서드를 사용한다.
Syntax
domRect = element.getBoundingClientRect();
❗ CSS는 오른쪽 아래를 기준으로 bottom, right 이 측정되기 때문에 주의할 것
실습
참고
MDN | Element.getBoundingClientRect() : https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
2. MouseEvent - client X/Y 와 page X/Y 비교
정의
page의 X,Y 좌표는 렌더링된 "전체" 페이지의 왼쪽 상단 모서리 기준(스크롤의 숨겨진 부분 포함)
client의 X,Y 좌표는 브라우저 창을 통해 "보이는" 페이지의 왼쪽 상단 모서리 기준
screen의 X,Y 좌표는 화면 모니터에서의 X,Y 좌표
실습
참고
MDN | MouseEvent : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
3. 윈도우 사이즈
브라우저를 포함한 모니터 사이즈
window.screen
window.screen.width
window.screen.height
브라우저 전체 사이즈
window.outer
window.outerHeight; // 브라우저 창 외곽 높이
window.outerWidth; // 브라우저 창 외곽 너비
브라우저 웹페이지 사이즈(스크롤바 포함)
window.inner
window.innerHeight; // 페이지가 표기되는 부분의 높이 (수직 스크롤 포함한 영역)
window.innerWidth; // 페이지가 표기되는 부분의 너비 (수평 스크롤 포함한 영역)
브라우저 웹페이지 사이즈(스크롤바 제외)
documentElement.client
document.documentElement.clientWidth; // 스크롤바 제외한 영역의 높이
document.documentElement.clientHeight; // 스크롤바 제외한 영역의 너비
※document.documentElement - document를 제외한 DOM 트리의 root인 <html>
실습
종합 이미지
참고
MDN|Window : https://developer.mozilla.org/en-US/docs/Web/API/Window
4. Window.scrollX, Window.scrollY
정의
Window 인터페이스의 scrollX 읽기 전용 속성은 문서가 수평으로 얼마나 스크롤됐는지 픽셀 단위로 반환한다.
최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아니다.
수직 스크롤은 scrollY 속성을 사용하여 가져올 수 있다.
Syntax
var x = window.scrollX
var y = window.scrollY참고사항
window.pageXOffset === window.scrollX; // 항상 true
window.pageYOffset === window.scrollY; // 항상 true정숫값이 필요하면 Math.round()를 사용해 반올림할 수 있다.
참고
https://developer.mozilla.org/ko/docs/Web/API/Window/scrollX
https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY
'WEB > Html & Css' 카테고리의 다른 글
| [HTML] Font awesome 대신 Google Material Icons 사용하기 (0) | 2022.06.13 |
|---|---|
| Ellie HTML / CSS (yotube lecture) (0) | 2022.05.16 |
| IntersectionObserver API - 긴 스크롤 상황에서 태그에 콜백적용하기 (0) | 2022.04.08 |
| Element.scrollIntoView() (0) | 2022.04.07 |
| [Interactive_web] CSS Template (0) | 2022.04.05 |