2023 08 16

2023-08-16

HTML ELEMENT focus()

참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus 참고: https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8A%B9%EC%A0%95-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EC%97%90-focus-%EC%A3%BC%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACfeat%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

• 개요
  • HTMLElement.focus()는 포커싱 될 수 있는 특정한 엘리멘트에 대해 focus를 진행한다
  • 포커스 된 element는 키보드 및 비슷한 이벤트를 받게 된다.
  • 디폴트로 브라우저는 포커싱한 이후 뷰 안쪽으로 엘리멘트를 보여주도록 스크롤을 해버린다.

• 파라미터
  • options
    • preventScroll: T/F 값으로 브라우저가 스크롤해서 새로운 포커스해버린 엘리멘트로 이동시켜야 하는지를 설정
    • focusVisible: true로 강제로 엘리멘트

scrollTo

참고: https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

• 개요
  • window.scrollTo(x, y)
    • x: 왼쪽 상단 시작 픽셀
    • y: 왼쪽 상단 시작 픽셀 단위 세로축

scrollIntoView()

참고: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

• 개요
  • scrollIntoView()가 호출된 요소에 사용자에게 표시되도록 요소의 상위 컨테이너 스크롤

• scrollIntoView(alignToTop: boolean)
  • true: 스크롤 가능한 조상 요소의 보이는 영역 상단에 정렬
  • false: 스크롤 가능한 조상 요소의 보이는 영역 하단에 정렬

getBoundingClientRect

참고: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

• 개요
  • 엘리먼트의 크기와 뷰포트에 상대적인 위치를 제공하는 DOMRect 객체를 반환
  • padding, border-width를 포함해 전체 엘리먼트가 들어있는 가장 작은 사각형
  • left, top, right, bottom, x, y, width, height 프로퍼티를 반환해 픽셀로 뚝딱
  •