[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초. 화면의 크기 및 영역을 제어하기, how to control elements when resize the screen

 

 

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

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

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

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

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

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

 

■ 기본

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

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

 

console.log(mediaViewContent)

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

 

■ 응용

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

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

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

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

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

 

■ 응용 - 예시)

<script>
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)
</script>

 

결과

 

 

이상입니다.