자바스크립트로 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( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.
콘솔창에 출력된 내용을 확인, 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>
이상입니다.
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ JavaScript ] Input 태그 내에서 엔터 이벤트 실행 (0) | 2021.12.02 |
|---|---|
| [ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript (0) | 2021.12.02 |
| [ Chart.js ] chart.js 차트 크기 지정 방법, how to resize canvas with chart.js? (0) | 2021.12.01 |
| [ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려내기 | how to draw two graph in one canvas? (0) | 2021.11.30 |
| [ JavaScript ] 배열에 앞에, 뒤에 데이터 삽입하는 방법 (0) | 2021.11.30 |
