JavaScript에서 화면 너비가 특정 값보다 크거나 작은지 감지하는 방법을 알아봅니다.
개발을 하다 보면 특정 조건에 따라 코드를 실행해야 하는 경우가 자주 있습니다.
예를 들어, 화면 공간이 제한적인 스마트폰 같은 작은 화면에서는 숨기고, 넓은 화면에서만 보여주고 싶은 요소가 있을 수 있습니다.
참고로 특정 기기 유형 감지는 개발자들 사이에서도 의견이 분분한 꽤 복잡한 주제입니다. 몇 시간 동안 조사해도 신뢰할 만한 데이터가 충분히 모이지 않아 별도의 글로 정리하지는 못했습니다(추후 업데이트 예정).
픽셀 단위로 화면 너비를 동적으로 감지하는 방법
다행히 픽셀 값을 기준으로 화면 크기를 판별하는 것은 훨씬 간단하며, 실무에서 다양한 상황으로 유용하게 활용할 수 있습니다.
아래 코드를 브라우저 개발자 도구 콘솔이나 CodePen 같은 온라인 에디터에 붙여넣어 보세요.
window.addEventListener("resize", function() {
if (window.matchMedia("(min-width: 500px)").matches) {
console.log("Screen width is at least 500px")
} else {
console.log("Screen less than 500px")
}
})코드를 실행한 후 브라우저 창을 좁게부터 넓게까지 천천히 조절해 보세요. 콘솔에 창 너비에 따른 결과가 출력되는 것을 확인할 수 있습니다.
코드의 작동 원리
- 먼저
window객체에addEventListener()메서드를 연결합니다. - 이벤트 리스너에는
'resize'와function() {}, 두 개의 인수를 전달합니다. - 첫 번째 인수는 이벤트 리스너에게 리사이즈 이벤트를 감지하도록 지시합니다. 창 크기가 아주 조금만 변해도 하나의 이벤트로 등록되며, 이벤트가 발생할 때마다 두 번째 인수인 익명 함수가 실행됩니다.
- 익명 함수 본문 안에는
window.matchMedia()를 사용한 조건문이 들어갑니다.matchMedia()는 CSS 미디어 쿼리 문법을 JavaScript에서 평가할 수 있게 해주는 메서드로, 조건이 참일 때.matches가true를 반환합니다. - 첫 번째 조건: "기기의 화면 너비가 최소 500px 이상이면 console.log('do something')을 실행한다." 두 번째 조건: "화면 너비가 500px 미만이면 console.log('do something else')을 실행한다."
미디어 쿼리 조건은 필요에 맞게 얼마든지 수정할 수 있습니다. 예를 들어 (max-width: 768px)처럼 바꾸면 태블릿 크기 이하의 화면을 감지할 수 있어, 반응형 웹 개발에서 매우 유용하게 쓰입니다.