resize

[JS] Element 크기 변화 감지 (ResizeObserver)

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다. ResizeObserver API const $target = document.querySelector('div'); const observer = new ResizeObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }); // 크기변화를 관찰할 요소지정 observer.observe($target); Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정..

[JS] 브라우저 크기 변경에 반응하는 이벤트

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다. // 1. window.addEventListener(`resize`, function() { }); // 2. window.onresize = function() { } 변경된 사이즈 가져오기 window.onresize = function() { const width = window.innerWidth; const height = window.innerHeight; console.log(width); console.log(height); } 윈도우..