JavaScript

resize()

KIMYOUNGIN 2022. 8. 3. 09:46
반응형

가끔 화면의 특정 부분을 윈도우 창을 줄이거나 넓이거나 했을때 항상 유지해야하는 경우가 있다.( 다양한경우가 있음)

이럴 때 resize()를 사용해서 해결하면된다.

 

우선 resize는 윈도우(브라우저) 사이즈가 바뀔 때 작업을 할 수 있게 하는 함수이다!!

내가 실제 쓰는 코드보단 사용법에 대해 알아보고 응용할수있도록 생각해보자.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>resize테스트</title>
    
    <style>
      div {
        width: 90%;
        text-align: center;
        margin: auto;
        border: 2px solid;
        background-color : #aff3bd;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <script>
      $(document).ready(function(){  //페이지 시작하자마자 ready로 바로 실행, $(document)는 html요소에 접근하기위해!! = 해석하면 html요소 접근해서 바로 실행해라! 그안의 내용은 {}속 내용
    	 console.log("ready됨")
        
        
        $(window).resize(function(){ // $(window)로 document가 모두 준비 되면 실행됨! 창조절할때마다 {}의 내용이 실행된다~
          garo = $('div').width(); //   $(window)확인겸 테스트/ div넓이값을 garo에 넣는다.
          $('div').empty().append(garo); //(윈도우창이 움직일경우) empty로 div의 값 지우고 append(garo값을) 붙여준다.
          console.log("resize됨")
        } );
      } );
    </script>
  </head>
  <body>
    <div>지정하고싶은 영역</div>
  </body>
</html>

코드는 대강 짜보고

실행해보면 콘솔창에 ready됨이라고 볼수있고, 창조절을 안했기 때문에 resize콘솔값이 안찍힘.

이 후 창조절 해보면

창크기를 조절해보면 함수가 실행 되면서 로그찍힌걸 볼 수 있고, 

화면의 가운데 값이 변하는 것을 볼수있다. 로그창 보면 25번이나 실행됨(조절할때마다 25번실행된거임)

결론

해당 태그나,  id, class 값을 가져와서 $().resize()를 사용해서

창을 조절시 원하는 조건을 주면서 해결하는 방법도 있다.

반응형