본문 바로가기

Front-end/HTML, CSS

getBoundingClientRect

element.getBoundingClientRect()로 사용

 

element의 size와 element와 viewport 사이의 상대적 거리에 대한 값을 저장하고 있는 DOMRect 오브젝트를 반환한다.

 

 

See the Pen Untitled by Donghwan Oh (@iamodh) on CodePen.

 

- width는 기본적으로 padding과 border-width에 content의 너비를 더한 값이 된다.

 

- box-sizing을 border-box로 하면 content의 자체 너비 (border-box로 계산된 너비)가 된다.