div 가운데 정렬을 배웠더니, 브라우저가 사이드바를 추가했다
We finally learned to center a div, then browsers added sidebars
div를 가운데 정렬하는 것은 이제 CSS Grid로 쉽게 해결되지만, 브라우저에 사이드바가 생기면서 문제가 발생한다. JavaScript로 창과 웹뷰의 너비 차이를 계산해 보정하려 했지만, DevTools가 열리면 실패한다. 포인터 이벤트의 screenX와 clientX를 이용해 웹뷰의 위치를 정확히 알아내는 방법을 소개한다. Firefox는 뷰포트 위치를 직접 제공하지만 Chromium은 그렇지 않아, 이 사이트는 왼쪽 사이드바 추정으로 시작해 포인터가 페이지에 들어오면 보정한다. 이 기법을 다른 페이지에도 적용할 수 있도록 'center, actually'라는 도구를 만들었다.
신뢰할 수 있는 포인터 이벤트는 화면에서의 위치와 웹뷰 내부에서의 위치를 알기 때문에, 웹뷰가 창 안에서 어디에 있는지 찾기에 충분하다.