프론트 개발을 하다보면 웹 페이지의 다양한 요소들을 직접 제어해야 하는 경우가 있습니다. 이 글에서는 CSSOM의 네 가지 주요 좌표 체계인 Offset, Page, Viewport, Screen에 대해 자세히 알아보고, 위치와 크기 관련 API는 어떤것이 있는지 살펴볼 예정입니다. 이 글을 통해 웹 페이지 내에서 요소의 위치와 크기를 정밀하게 제어하는 데 도움이 되길 바랍니다. 표준 CSSOM 좌표 체계 보통 클라이언트 개발에서 좌표의 원점은 왼쪽 하단이 아닌, 왼쪽 상단 입니다. CSS 객체 모델에서는 Offset, Page, Viewport, Screen 네 가지 표준 좌표 체계가 있습니다. 출처: MDN Coordinate_systems Offset 정의: 오프셋 좌표 체계는 특정 요소의 상대적 위치를 나타내는 데 사용됩니다. 이는 요소의 왼쪽 상단 모서리를 시작점(원점)으로 합니다. 특징: 이 좌표 체계는 요소의 부모 요소를 기준으로 한 상대적 위치를 제공합니다. 마…

문제상황 dropdown 컴포넌트를 만들었는데, focus가 다른곳으로 이동하면 펼쳐져있던 dropdown이 접혀져야 해서 blur 이벤트 발생시 접히도록 했다. 그랬더니 펼쳐져 있는 항목 중 하나를 click 했을때, 위에서 설정한 blur 이벤트가 먼저 발생하면서 click 이벤트가 호출되지 않는 이슈가 문제였다. dropdown_비정상동작.gif 문제의 코드 TL;DR Touch, mouse 이벤트 순서 touchstart touchmove touchend mouseover mousemove mousedown mouseup click 해결방법 click시 처리해줘야 하는 이벤트 핸들러를 click 이 아닌 mousedown 에서 처리해준다. dropdown_정상동작.gif Dropdown CodeSandbox Touch and mouse 이벤트 그러면 지금부터는 web.dev 문서를 살펴보면서 알게된 touch 이벤트의 도입 배경과 touch, mouse 이벤트를 함께 다루기…