반응형
container.getBoundingClientRect()는 container 요소의 위치와 크기 정보를 반환하는 메소드입니다.
getBoundingClientRect() 메소드를 호출하면, container 요소의 상대적인 위치와 크기에 대한 정보를 나타내는 DOMRect 객체가 반환됩니다. DOMRect 객체는 다음과 같은 속성을 포함합니다:
- left: 요소의 좌측 경계선의 X 좌표
- top: 요소의 상단 경계선의 Y 좌표
- right: 요소의 우측 경계선의 X 좌표
- bottom: 요소의 하단 경계선의 Y 좌표
- width: 요소의 폭 (우측 경계선 X 좌표와 좌측 경계선 X 좌표 사이의 거리)
- height: 요소의 높이 (하단 경계선 Y 좌표와 상단 경계선 Y 좌표 사이의 거리)
containerRect 변수에 container.getBoundingClientRect()를 할당함으로써, container 요소의 위치와 크기에 대한 정보를 containerRect에 저장할 수 있습니다. 이 정보는 후속 작업에서 사용되어 요소의 위치와 크기를 계산하거나 업데이트하는 데 사용될 수 있습니다.
반응형
'개발자가 되는 방법' 카테고리의 다른 글
| 한 페이지에서 비동기 적으로 메뉴별 페이지네이션 하기 (0) | 2023.06.02 |
|---|---|
| 반응형 정사각형 만들기 (0) | 2023.05.31 |
| CSS 가상요소 선택자 (0) | 2023.05.30 |
| SVG <line> 요소를 이용하여 웹페이지에 세로 선을 그려보자 (2) | 2023.05.30 |
| "응집도(Cohesion)"이란 ? (0) | 2023.05.27 |