[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초...

[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초...

728x90

반응형

자바스크립트로 css 를 제어할 수 있습니다.

보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠.

대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다.

css 로는 @media ( width: 1000px ) { } 이런 식으로 작성합니다.

JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다.

화면 크기에 맞춰 변경되는 결과

■ 기본

// 화면인식 992px 사이즈 조절 const mediaViewContent = window.matchMedia(`(max-width: 992px)`) // 1 console.log(mediaViewContent) const viewChangeHandler = (mediaViewContent) => { // 3 //이곳에 원하는 이벤트 설정 } mediaViewContent.addEventListener("change", viewChangeHandler) // 2

이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.

console.log(mediaViewContent)

콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다.

■ 응용

MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용하면 편하다.

992px 이상이 되면 false, 미만이 되면 true가 되는데, 이를 이용하도록 한다.

[기준 이상: false, 기준 미만: true ]

if(mediaViewContent.matches === true){ // 992px보다 작아질 때 } else { // 992px 보다 커질 때 (원상복구) }

이런식으로 사용 하면 되는데,

각각의 내용 안에 id.style.any = '' 를 지정해주면 된다.

■ 응용 - 예시)

const mediaViewContent = window.matchMedia(`(max-width: 992px)`) const viewChangeHandler = (mediaViewContent) => { const moveToQnA = document.querySelector('#moveToQnA') const flexControlPannel = document.querySelector('#flexControlPannel') const moveToStatisticsList = document.querySelector('#moveToStatisticsList') if(mediaViewContent.matches === true){ console.log('shrink') moveToQnA.classList.remove("col-5") moveToQnA.classList.remove("ml-5") moveToQnA.classList.add("mb-5") moveToQnA.style.width="100%" flexControlPannel.classList.remove("d-flex") flexControlPannel.classList.remove("justify-content-between") flexControlPannel.style.height="100%" moveToStatisticsList.classList.remove("col-5") moveToStatisticsList.style.width="100%" } else { console.log('release') moveToQnA.classList.add("col-5") moveToQnA.classList.add("ml-5") moveToQnA.classList.remove("mb-5") moveToQnA.style.width="48%" flexControlPannel.classList.add("d-flex") flexControlPannel.classList.add("justify-content-between") flexControlPannel.style.height="400px" moveToStatisticsList.classList.add("col-5") } } mediaViewContent.addEventListener("change", viewChangeHandler)

결과

이상입니다.

728x90

반응형

from http://code-hoon.tistory.com/140 by ccl(A) rewrite - 2021-12-01 16:27:43