[JavaScript] 자바스크립트 사이즈 벗어난 화면 처리하기

124_자바스크립트 사이즈 벗어난 화면 처리하기

[적용]

• 사이즈를 벗어난 화면을 처리하고 싶을 때
• 스마트폰의 가로, 세로 화면 전환 시 작업을 처리하고 싶을 때

---

[문법1]

메소드	의미	반환
matchMedia(미디어쿼리)	미디어 쿼리 정보	객체(MediaQueryList)
matchMedia(미디어쿼리).addListener(처리)	미디어 쿼리 일치시 처리	없음

 

[문법2]

속성	내용	타입
matchMedia(미디어쿼리).matches	미디어 쿼리 일치 여부	진리값

---

[내용]

matchMedia()는 인수에 따라 미디어 쿼리의 정보를 반환한다.

예를 들어 '윈도우 창의 가로 길이 500px 이상'을 의미하는 '(min-width: 500px)'를 전달하면 다음과 같은 정보가 반환된다.

matches 속성은 미디어 쿼리 일치 여부의 진기값을 가지고 있으며, media 속성은 브라우저가 확인한 쿼리의 문자열을 가진다.

const mediaQueryList = matchMedia('(min-sidth: 500px)');
console.log(mediaQueryList);

// 출력 결과
// {
// matches: true,  // 윈도우 창의 크기가 500px 이상일 때
// media: '(min-width: 500px)'
}

 

matchs 속성을 사용하면 브라우저 윈도우 창의 크기와 미디어 쿼리의 일치 여부를 확인 할 수 있다.

// 윈도우 창의 크기가 300px 이하이면 true
matchMedia('(max-width: 300px)').matches;

// 윈도우 창의 크기가 100px 이상 700px 이하라면 true
matchMedia('(min-sidth: 100px) and (max-width-width: 700px)').matches;

 

스마트폰의 가로, 세로 전환 확인 등 미디어 쿼리 변화 시점에 따라 처리 작업을 하고 싶을 때는

다음과 같이 콜백(Callback) 처리를 사용한다.

콜백 처리는 미디어 쿼리의 상태 변화에 따라 실행된다.

// (orientation:portrait) 가로 전환 대기
const mediaQueryList = matchMedia('(orientation: portrait)');

mediaQueryList.addListener(() => {
  console.log('디바이스 화면의 방향이 전환되었습니다.');
});

 

콜백 처리는 MediaQueryList를 가져온다.

윈도우 창의 크기가 600px 이상인 경우와 미만인 경우에 대해 색상을 변경하는 샘플을 확인해 보자.

.rextangle 요소에 대해 크기 600px를 기준으로 big-size 클래스를 설정한다.

big-size 요소에 따라 .rectangle 요소의 색이 변한다.

 

HTML                                                                                                                                                              index.html

<div class="rectangle"></div>

CSS                                                                                                                                                                 style.css

.rectangle {
  background-image: linear-gradient(-135deg, #00aaff, #5500ff);
}

.rectangle.big-size {
  background-image: linear-gradient(-135deg, red, #ff00a2);
}

JavaScript                                                                                                                                                          main.js

const rectAngle = document.querySelector('.rectangle');

// 미디어 쿼리 정보
const mediaQueryList = matchMedia('(min-width: 600px)');

// 미디어 쿼리 변화 시점에 따라 처리
mediaQueryList.addListener(onMediaQueryChange);

/**
 * 미디어 쿼리 변화 시점에 따라 실행되는 함수
 */
function onMediaQueryChange(mediaQueryList) {
  if (mediaQueryList.matches === true) {
    recTanle.classList.add('bid-size');
    console.log('윈도우 창의 크기가 600px 이상입니다.');
  } else {
    rectAngle.classList.remove('big-size');
    console.log('윈도우 창의 크기가 600px 미만입니다.'_;
  }
}

// 화면 표시 시점에 onMediaQueryChange() 1회 실행
onMediaQueryChange(mediaQueryList);

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김