getBoundingClientRect()

😜 좌표찍기의 서막

소소한(?) 개인 프로젝트를 하고 있던 나는 마우스 클릭 이벤트가 발생한 지점에서 모달창이 뜨도록 만들고 싶었는데 좌표값을 반환할 수 있는 메서드가 무엇이 있을까 찾아보던 중..

mdn에서 이러한 메서드를 발견했다..!

Element.getBoundingClientRect() 메서드는 요소의 사이즈와 뷰포트에 대한 상대적인 위치에 관한 정보를 제공하는 DOMRect객체를 반환한다

🧐 내가 사용한 속성

DOMRect객체는 x(요소의 우상향 x좌표), y(요소의 우상향 y좌표), width, height, top, right, bottom, left 등의 속성을 가지고 있었는데 나의 경우는 요소의 하단 부분의 y좌표값인 bottom 속성과 요소의 좌측 부분의 x좌표인 left속성을 이용하여 좌표값을 알아낸 뒤 그 값을 이용하여 내가 원하는 위치를 계산하여 css에 적용했다..!

• 내가 구현한 부분에서는 저 파란색 직사각형이 해당 요소로, 직사각형의 하단부분의 y좌표 위치(bottom), 직사각형의 좌측부분의 x좌표 위치(left)를 활용하였다 (해당 좌표값에서 내가 원하는 위치만큼의 px은 조정하였다)

• 모달 완성!

🙄 오늘의 tmi

tailwindcss는 동적으로 생성된 클래스는 인식하지 않는다고 한다.
클릭한 지점의 좌표값을 기준으로 px값을 지정해 그 값을 클래스 이름으로 받아오고 싶었는데...
미리 여러 개의 완성된 클래스를 지정해두고 case에 따라 값을 정할 수는 있지만 나의 경우 클릭한 순간의 좌표를 받아서 받아내야 하기 때문에 그냥 px값을 인라인 스타일로 적용해버렸다..🥲

참고문서
getBoundingClientRect()
DOMRect