투케이2K

531. (javaScript) [간단 소스] 자바스크립트 ResizeObserver 사용해서 실시간 특정 객체 요소 크기 사이즈 변경 상태 감지 수행 본문

JavaScript

531. (javaScript) [간단 소스] 자바스크립트 ResizeObserver 사용해서 실시간 특정 객체 요소 크기 사이즈 변경 상태 감지 수행

투케이2K 2026. 5. 18. 19:39
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / ResizeObserver


- 사전) 👉 ResizeObserver 를 사용할 수 있는 버전 간략 설명 :  

  >> 2020 년 이후 브라우저 = 거의 다 지원

  >> Chrome : ✅ 64+

  >> Edge (Chromium) : ✅ 79+
  
  >> Firefox : ✅ 69+
  
  >> Safari : ✅ 13.1+ (모바일은 13.4+)
  
  >> Opera : ✅ 51+
  
  >> IE : ❌ 지원 안됨

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">      

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // ------------------------------------------------------
          // ✅ [ResizeObserver 기본 설명 정리]
          // ------------------------------------------------------
          /*
          1. ResizeObserver 는 DOM 요소의 크기(width/height) 변화를 감지하는 최신 브라우저 API입니다.
          
            👉 ResizeObserver는 특정 요소(Element)의 크기가 변할 때 자동으로 콜백 함수 실행하는 객체입니다.
          ---------------------------------------------------------
          2. ResizeObserver 는 레이아웃 변화, 반응형 UI, FullCalendar 같은 컴포넌트에서 매우 많이 사용됩니다.
          ---------------------------------------------------------
          3. ResizeObserver 기본 동작 구조 : 
          
          const observer = new ResizeObserver(entries => {
            for (let entry of entries) {
              console.log(entry.contentRect.width);
            }
          });

          observer.observe(document.getElementById('box'));
          ---------------------------------------------------------
          // */          

          
          // [ResizeObserver 사용해 body 객체 크기 변경 상태 감지]
          const observer = new ResizeObserver(entries => {

            for (let entry of entries) {

              // -----------------------------------------
              // ResizeObserver의 contentRect 는 👉 요소의 "콘텐츠 영역(content box)" 크기를 반환합니다.
              // -----------------------------------------
              // contentRect 의 반환 값
              // -----------------------------------------
              /*
              {
                width,
                height,
                top,
                left,
                bottom,
                right
              }
              */
              // -----------------------------------------
              // contentRect CSS 박스 모델 기준
              // -----------------------------------------
              /*
              ┌─────────────────────┐
              │      margin         │
              │  ┌───────────────┐  │
              │  │    border     │  │
              │  │  ┌─────────┐  │  │
              │  │  │ padding │  │  │
              │  │  │ ┌─────┐ │  │  │
              │  │  │ │content│ │  │  │  ← ✅ contentRect 기준
              │  │  │ └─────┘ │  │  │
              │  │  └─────────┘  │
              │  └───────────────┘
              └─────────────────────┘
              */
              // -----------------------------------------
              console.log('ResizeObserver size changed : ', entry.contentRect.width, entry.contentRect.height);

            }
          });

          observer.observe(document.body); // Body 지정 시

          //observer.observe(document.getElementById('box')); // 특정 객체 지정 시

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [실시간 브라우저 크기 사이즈 변경 감지 - resize , screen 객체 availWidth , availHeight 사용]

https://kkh0977.tistory.com/971

https://blog.naver.com/kkh0977/222428346030?trackingCode=blog_bloghome_searchlist


▶️ [onresize 화면 크기 변환 감지 사용해 안드로이드 가상 키보드 활성 상태 체크 실시]

https://kkh0977.tistory.com/2145

https://blog.naver.com/kkh0977/222808722135?trackingCode=blog_bloghome_searchlist


▶️ [Web] 자바스크립트 에서 모바일 ( android , ios ) 가상 키보드 활성 상태 확인 방법 - onresize , focus , blur

https://kkh0977.tistory.com/7209

https://blog.naver.com/kkh0977/223629294644?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

533. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 textContent , innerText 텍스트 변경 감지 수행  (0) 2026.05.19
532. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 특정 객체 css style 스타일 변경 감지 수행  (0) 2026.05.19
530. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 및 유효성 검증 팝업창 재오픈 수행  (0) 2026.04.30
529. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 다중 input 입력 받기 팝업창 생성 - text , number , password  (0) 2026.04.28
528. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 - prompt , text , number , password  (0) 2026.04.27
'JavaScript' Related Articles more
Comments