[javascript] onresize() 함수를 사용해 크기에 따라 변화하는 반응형 코딩하기

💡

오늘은 윈도우 창 크기에 따라 변화를 감지하는 onresize() 함수를 사용해 반응형 코딩하는 법을 알아보겠습니다.

👀이전 포스팅

https://yeonzzy.tistory.com/24?category=948652

[javaScript]삼항연산자로 간단하게 코딩하기

💡 오늘은 간단하고 간편하게 코딩할 수 있는 삼항연산자에 대해 알아보겠습니다. 👀이전 포스팅 https://yeonzzy.tistory.com/22 [jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까? 💡 오늘은 체크..

yeonzzy.tistory.com

반응형 이란?

반응형 웹 (Responsive Web)은 웹제작과 관련된 기술로

pc, 모바일, 태블릿 등 각각의 기기별로 홈페이지의 페이지가 최적화되어 보여지는 기능으로

이용자 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이다.

resize()

window 객체의 onresize() 프로퍼티는 사용자가 브라우저 창이나 프레임을 변경했을 때 호출되는 이벤트이다.

✅ 스크립트 작성 window.onresize = function(event){}

✅ 이벤트 호출 window.addEventListener('resize', function(event) { ... }, true);

✅ 함수호출 <body onresize="myFunction()">

1번 방법인 스크립트를 작성하여 윈도우의 크기가 변경될 때 마다 사이즈를 나타낼 수 있다.

<!-- 관련 스타일& html -->
<style>
    body{width: 100%; border: 10px solid red; margin: 0 auto;}
    h1{text-align: center;}
</style>
<body>
    <h1 id="size">window size</h1>
</body>

// .js

var size = document.getElementById("size");

window.onresize = function(event){
var innerWidth = window.innerWidth;
size.textContent = innerWidth;
}

See the Pen <a href="https://codepen.io/yeonzzy/pen/XWMPVJz">XWMPVJz</a> by yeonji_gonji (<a href="https://codepen.io/yeonzzy">@yeonzzy</a>) on <a href="https://codepen.io">CodePen</a>.

더 나아가 윈도우의 크기가 1280 이하로 작아지면 border 색상을 파랑색으로

그 이상으로 커지면 border 색상을 검정으로 변화하는 코딩을 구현할 수 있다.

// window width 값 변화 시 border color 변경.js
var body = document.getElementsByTagName("body")[0];

window.onresize = function(event){
var innerWidth = window.innerWidth;
innerWidth <= "1280" ? body.style.borderColor = "blue" : body.style.borderColor = "black";
}

See the Pen <a href="https://codepen.io/yeonzzy/pen/PopdEWq">PopdEWq</a> by yeonji_gonji (<a href="https://codepen.io/yeonzzy">@yeonzzy</a>) on <a href="https://codepen.io">CodePen</a>.

inner / outer의 차이

그렇다면 window의 가로 사이즈를 알 수 있는 속성들의 차이점은 무엇일까?

👆 innerWidth , innerHeight

현재 화면에 보이는 웹 브라우저 페이지

✌ outerWidth , outerHeight

웹 브러우저 창 자체의 크기

inner는 html로 작성되는 부분인 파란라인 부분이 innerWidth 와 innerHeight 이고

outer는 아래의 사진에서 빨간 부분이 outerWidth 와 outerHeight 이다.

대부분 전체 창의 크기는 필요하지 않고 구현되어 보여지는 inner 속성을 많이 사용한다.

이렇게 화면의 크기를 실시간으로 감지하여 변화가 필요할 땐 onresize() 를 사용하면 된다.

처음 로드되었을 때 화면크기를 인식하여 구분하는 함수는 onload() 함수를 사용하는데 이 함수는 다음 포스팅에서 다뤄보겠다!

저작자표시 비영리

'study > java$cript' 카테고리의 다른 글

[javaScript]삼항연산자로 간단하게 코딩하기 (0)	2021.05.31
[javascript] === / !== / == / != 의 다른 점은 무엇일까 ? (0)	2021.05.26

yeon_log

[javascript] onresize() 함수를 사용해 크기에 따라 변화하는 반응형 코딩하기

'study > java$cript' 카테고리의 다른 글

티스토리툴바

[javascript] onresize() 함수를 사용해 크기에 따라 변화하는 반응형 코딩하기

'study > java$cript' 카테고리의 다른 글

'study/java$cript' Related Articles

티스토리툴바