[JS] 이벤트 처리 - Viewport 에 따른 사이즈 변경

만일 사용자가 윈도우 창의 크기를 줄이거나 늘리면 (resize)하면 그때마다 그 값을 받아와서 나타낸다.

아래 코드는 직접 codepen에 들어가서 화면 크기를 줄이거나 늘려가면서 비교하는 것이 좋다.

 

See the Pen Untitled by Tae (@Tae54) on CodePen.

 

innerWidth()은  window, frame, frameset이나 다른 윈도우들처럼 모든 window 형식의 객체에서 사용할 수 있고 읽어들기만 할 수 있다.

// 다음과 같이 뷰포트의 폭을 받아올 수 있습니다.
var intFrameWidth = window.innerWidth;

// 다음과 같이 frameset 안의 어떤 frame의 뷰포트 폭을 받아올 수 있습니다.
var intFrameWidth = self.innerWidth;

// 다음과 같이 가장 가까운 frameset의 뷰포트 폭을 받아올 수 있습니다.
var intFramesetWidth = parent.innerWidth;

// 다음과 같이 가장 바깥쪽 프레임셋의 뷰포트 폭을 받아올 수 있습니다.
var intOuterFramesetWidth = top.innerWidth;

innerText() 은 html안에 텍스트 요소를 변경해준다.

 

1. 지정한 값으로 사이즈 변경하기 : resizeTo(width1, height1)

px단위로 나타낸다. 가로길이 width1 px, 세로길이 height1 px으로 재설정된다.

// Create resizable window
myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");

// Resize window to 500x500
myExternalWindow.resizeTo(500, 500);

// Make window relatively smaller to 400x400
myExternalWindow.resizeBy(-100, -100);

2. 일정한 값으로 사이즈 줄이기 : resizeBy(-100,-100)

 

 

mediaquery@

사용자가 웹에 접속하는 장치의 종류는 다양하다.

pc, 타블렛, 모바일으로 크게 3가지로 나눌수 있는데 각 기기마다 화면 사이즈가 다르므로 각자 다른 사이즈의 윈도우창을 가질 수 있다. 

 

대략 아래와 같은 사이즈를 갖는다고 간주하고 

pc :   1024px < width

타블렛 : 768 < width <1024px( 가로설정) / 480px < width <767px (세로설정)

모바일 :  480px < width <767px (가로설정) / width < 480px (세로설정)

 

사용자가 사용하는 디바이스의 width를 알고 싶다면

matchMedia()을 이용하자.

 

media query @은 정해진 특정 문자열query을 이용해 그 값이 참인지 아닌지를 이용한다.

const mediaQuery = matchMedia('(min-width: 600px)');

console.log(mediaQuery)

특정 문자열 (query) : '(min-width : 값px)'

MediaQueryList {media: '(min-width: 600px)', matches: true, onchange: null} undefined

위와 같은 값을 값게 된다.  사용한 윈도우 창의 너비는 600px 이상므로 진릿값으로 true가 나왔다.

사용한 media도 함께 딕셔너리로 출력된다. 

 

max-width / min-width / orientation 등등 다양한 쿼리를 이용할 수 있다.

 

mediaquery은 작업이 1회에 한한다.