# getBoundingClientRect

jinic

https://heropy.blog/2019/10/27/intersection-observer/https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC

chooomu

📌 getBoundingClientRect() 현재 브라우저 화면을 기준으로 위치 값을 가져옴 element의 크기(width, height)와 뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y) 이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴. width, height는 contents뿐 ...

ptq124

회사에서 스크롤할때 따라다니는 메뉴를 구현했었다. 구글링을 했었지만 자료가 부족하여 이번 블로그를 통해 개발했던 내용을 정리하고자 한다. vuetify v-scroll 맨처음에 이벤트리스너를 사용하여 스크롤 이벤트를 감지하도록 했었지만 vuetify에서 제공하는 S

reyang

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인 DOMR

moolbum

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

hongwr

눈에 보여지는 수치.HTMLElement.offset은 원초적인 사이즈라고 이해하면 된다.문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환수평은 window.scrollX 사용HTML에서 data-\*\*\*\*(넣고 싶은 이름)로 사용할 수 있다.어느 엘리멘트에나

dosomething

Range 객체를 이용해 반응형에 따라 댓글 기능을 수정한 사례와 Range 인터페이스에서 사용한 메서드를 정리하였습니다

nemo

예전에는 각 브라우저의 호환성 문제로 라이브러리를 사용해야만 정확한 위치 값을 얻을 수 있었다.이제는 getBoundingClientRect() 메서드를 사용해 요소의 크기, 뷰포트로부터의 상대적 위치를 쉽게 알아낼 수 있다.id가 section인 요소에 getBoun

gygy

하얀색 하이라이터로 쓸 도형을 만들어준다.a 태그를 모두 가져와 mouse가 위로 올라가면 발생하는 이벤트를 등록한다.마우스가 올라간 a태그의 크기를 받아와 하이라이터의 크기를 똑같이 지정한다.스크롤한 만큼 하이라이터를 내리고 왼쪽으로 옮겨주어야 한다.

gygy

각 버튼에 마우스를 올릴 때마다 드롭다운 메뉴가 보여야 한다.CSS 스타일 선언 객체의 속성에 대한 새 값을 설정한다.style.setProperty(propertyName, value, priority);DOMString수정할 CSS 속성 이름(하이픈 대소문자)DOM

oneook

버튼을 누르면 해당 섹션으로 부드럽게 스크롤링 되는 기능은 제품과 서비스를 소개하는 한 장짜리 랜딩 페이지에서 자주 볼 수 있다. 타겟 요소까지 스크롤이 되는 것은 다음과 같이 정의할 수 있다. 타겟 요소 영역의 최상단이 뷰포트의 상단과 일치하는 것

chyoon0512

요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.메모이제이션된 값을 반환한다. 첫 번째 인자로는 함수, 두 번째는 의존성 값의 배열을 전달한다.의존성이 변경되었을 때만 첫 번째 인자에 전달한 함수가 실행된다.즉, 의

halfkiwi

버튼을 클릭 했을 때 그 위치에서 새로운 레이어를 띄우고 싶었다. 며칠 전에 알게 된 z-index를 응용해서 내가 원하는 위치에서 컴포넌트를 화면 위에 얹으면 될 것이라 생각했다. 하지만 버튼이 상황에 따라 x축의 좌표가(픽셀 단위의) 변하기 때문에 새로 띄우는 컴포

aliceinkorea

두 image를 따로 분리하여 div 로 감싼 이유는 image 자체의 사이즈를 줄여 효과를 줄 것이 아니라 image를 담고있는 div 컨테이너의 사이즈를 조절하여 visable portion을 조절할 것이기 때문이다.image 사이즈를 직접 변경하면 squize됨.

aliceinkorea

position:fixed와 유사하게 window 상단/왼쪽 모서리에서부터 계산하고이 좌표를 clientX/clientY로 표시document 최상단(root)에서 position:absolute를 사용하는 것과 비슷하게 document 상단/왼쪽 모서리에서부터 계산하

cash2cash

getBoundingClientRect() 메서드는 요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.

mementomori

마우스 포인터를 따라서 해당 텍스트의 길이와 위치에 맞게 하이라이트 효과가 되도록 구현 (stripe 웹페이지처럼, 메뉴 버튼에 hovering 하면, 이에 따라 선택 가능한 하위 메뉴 박스가 열리는 효과와 동일)'mouseover' event와 'mouseenver'

kyh196201

: getBoundingClientRectdomRect = element.getBoundingClientRect();: 부모 엘리먼트가 아닌 뷰포트를 기준으로 position을 계산한다.element.offsetTop, element.offsetLeft: 부모 엘리먼트