2023년 06월 10일

많이 고민했지만 필요 없었다.

📚 오늘 도전하고, 배운 것

🤔 학습하면서 궁금하거나 어려웠던 점

• zoom in, zoom out을 구현하려고 했다. CSS scale을 사용하여 zoom을 쉽게 할 수 있었으나 확대된 상태에서 화면을 이동할 때가 문제였다. translate을 사용할 때 원하는 만큼 정확하게 이동시키려니 계산이 필요했다. 그런데 막상 계산을 하고 나니까 애초에 zoom 기능이 필요없겠다는 결론이 내려졌다.
  왜냐하면 전체 크기는 어차피 고정되어 있어서 웹 브라우저의 기본 확대 기능으로 충분하다는 생각이 들었기 때문이다.

그래도 덕분에 DOMMatrixReadOnly라는 것을 알게되었다. 다음과 같이 사용해서 요소에 적용된 transform 속성 값들을 얻을 수 있었다.

const getStyle = getComputedStyle(element);
const transformStyle = new DOMMatrixReadOnly(getStyle.transform);

🌅 내일은 무엇을?

✒️ log

• 진짜 뭘 많이 먹었다.