CSS만으로 반응형 웹을 구현할 수 있지만, 화면 크기에 따라 동적으로 동작해야 하는 경우에는 JavaScript에서도 미디어 쿼리를 판별할 수 있어야 합니다. 이럴 때 사용하는 것이 바로 window.matchMedia() 메서드입니다. 이 메서드는 지정한 미디어 쿼리 문자열을 평가하고, 그 결과를 MediaQueryList 객체로 반환합니다.
핵심 개념 정리
window.matchMedia()로 생성된 객체는 두 가지 중요한 속성과 메서드를 제공합니다.
- matches: 현재 화면이 해당 미디어 쿼리 조건에 일치하면 true, 아니면 false를 반환합니다.
- addEventListener('change', 콜백): 화면 크기가 변해 미디어 쿼리 상태가 바뀔 때마다 지정한 함수를 실행합니다. (구형 브라우저에서는 addListener()를 사용합니다.)
예제: 화면 크기에 따라 배경색 변경하기
아래 예제는 브라우저 창의 너비가 700px 이하인지 여부를 감지하여, 배경색을 파란색 또는 빨간색으로 전환하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h1>JavaScript 미디어 쿼리 활용 예제</h1>
<h2>화면 크기를 조절하면 배경색이 파란색에서 빨간색으로 바뀝니다</h2>
<script>
var mediaQuery = window.matchMedia("(max-width: 700px)");
function setColor(mediaQuery) {
if (mediaQuery.matches) {
document.body.style.backgroundColor = "red";
} else {
document.body.style.backgroundColor = "blue";
}
}
setColor(mediaQuery);
mediaQuery.addEventListener("change", setColor);
</script>
</body>
</html>코드 설명
- window.matchMedia("(max-width: 700px)") – 최대 너비 700px 조건의 미디어 쿼리 객체를 생성합니다.
- setColor() – matches 값이 true(700px 이하)면 배경을 빨간색으로, false면 파란색으로 설정합니다.
- 페이지 로드 시 setColor(mediaQuery)를 즉시 호출해 초기 상태를 적용합니다.
- addEventListener("change", setColor) – 이후 화면 크기가 변할 때마다 자동으로 색상을 갱신합니다.
실행 결과
창 너비가 700px보다 클 때는 아래와 같이 파란색 배경이 표시됩니다.
반대로 브라우저 창 크기를 700px 이하로 줄이면 배경색이 빨간색으로 전환됩니다.
마무리
이처럼 window.matchMedia()를 활용하면 CSS 미디어 쿼리의 조건을 JavaScript 로직과 연동할 수 있습니다. 모바일 메뉴 토글, 조건부 광고 노출, 화면 방향 감지 등 다양한 반응형 기능을 구현할 때 유용하게 활용해 보세요.