# getBoundingClientRect

14개의 포스트
post-thumbnail

React - 컴포넌트 절대위치 찾기

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

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

2022.05.09 TIL

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

2022년 5월 9일
·
0개의 댓글
·
post-thumbnail

Range 객체를 통해 반응형 댓글 구현하기

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

2022년 5월 4일
·
0개의 댓글
·
post-thumbnail

[JS] getBoundingClientRect() 메서드

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

2021년 12월 24일
·
0개의 댓글
·
post-thumbnail

[JS30] - 22) Follow Along Link Highlighters

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

2021년 11월 6일
·
0개의 댓글
·
post-thumbnail

[JS30] - 26) Stripe Follow Along Dropdown

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

2021년 10월 30일
·
0개의 댓글
·
post-thumbnail

자동 스크롤링 버튼 만들기 | JS Snippets

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

2021년 8월 5일
·
0개의 댓글
·

TIL : getBoundingClientReact, React 내장 훅, 함수형 컴포넌트

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

2021년 5월 26일
·
0개의 댓글
·

오늘 배운 것

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

2021년 5월 23일
·
0개의 댓글
·
post-thumbnail

Toy Project 002 Slide-show(1)

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

2021년 3월 16일
·
1개의 댓글
·
post-thumbnail

TIL 007 JavaScript_getBoundingClientRect()

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

2021년 3월 4일
·
0개의 댓글
·

getBoundingClientRect()

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

2021년 1월 1일
·
0개의 댓글
·
post-thumbnail

22. Follow Along Link Highlighter

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

2020년 12월 18일
·
0개의 댓글
·
post-thumbnail

10/21 - js

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

2020년 10월 21일
·
0개의 댓글
·