목차
window.MediaQueryList 객체 정의 window.MediaQueryList 객체의 속성 window.MediaQueryList 객체의 메서드 Media Queries 정의 Media Types 종류 Media Features 종류
window.MediaQueryList 객체 정의
MediaQueryList 객체는 미디어 쿼리에 대한 정보를 저장.
MediaQueryList 객체는 window 객체의 속성에 해당.
MediaQueryList 객체는 window.matchMedia() (또는, matchMedia() )로 접근함.
[예제1] - window.matchMedia()로 접근 경우
<p id="demo"></p>
<script>
let text;
function updateText() {
if (window.matchMedia("(max-width: 700px)").matches) {
text = "700px 이하 화면";
} else {
text = "700px 초과 화면";
}
document.getElementById("demo").innerHTML = text;
}
// 초기화할 때 한 번 실행
updateText();
// 화면 크기 변경 시 실행되는 이벤트 핸들러 추가
window.addEventListener('resize', updateText);
</script>
결과보기
[예제2] - matchMedia()로 접근 경우
<p id="demo"></p>
<script>
let text;
function updateText() {
if (matchMedia("(max-width: 700px)").matches) {
text = "700px 이하 화면";
} else {
text = "700px 초과 화면";
}
document.getElementById("demo").innerHTML = text;
}
// 초기화할 때 한 번 실행
updateText();
// 화면 크기 변경 시 실행되는 이벤트 핸들러 추가
window.addEventListener('resize', updateText);
</script>
결과보기
window.MediaQueryList 객체의 속성
matches 속성 - (boolean 타입값). 문서가 쿼리와 일치하면 true 반환. 그렇지 않으면 false 반환.
media 속성 - (string 타입값). 미디어 쿼리 리스트
window.MediaQueryList 객체의 메서드
addListener() 메서드 - 미디어 쿼리의 평가 결과가 변경될 때마다 실행되는 새로운 리스너 함수를 추가함.
removeListener() 메서드 - 미디어 쿼리 목록에서 이전에 추가된 리스너 함수를 제거함. 지정된 리스너가 이미 목록에 없으면 아무 작업도 수행하지 않음.
Media Queries 정의
matchMedia() 메서드의 미디어 쿼리는 CSS의 @media 규칙의 미디어 특성 중 하나일 수 있음. (예) min-height, min-width, orientation 등
Media Types 종류
all: 기본값. 모든 미디어 타입 장치에 사용됨.
print: 프린터에 사용됨.
screen: 컴퓨터 화면, 태블릿, 스마트폰 등에 사용됨.
speech: 페이지를 음성으로 읽어주는 스크린 리더에 사용됨.
Media Features 종류
any-hover: 사용 가능한 입력 메커니즘이 요소 위에 마우스를 올리도록 허용하는지 여부
any-pointer: 사용 가능한 입력 메커니즘이 포인팅 장치인지, 그리고 정확성이 어떤지 여부
aspect-ratio: 뷰포트의 너비와 높이 사이의 비율
color: 출력 장치 당 색상 구성 요소당 비트 수
color-gamut: 사용자 에이전트와 출력 장치에서 지원되는 색상의 대략적인 범위
color-index: 장치가 표시할 수 있는 색상 수
grid: 장치가 그리드인지 비트맵인지 여부
height: 뷰포트 높이
hover: 주요 입력 메커니즘이 요소 위에 마우스를 올리도록 허용하는지 여부
inverted-colors: 브라우저 또는 기본 OS가 색상을 반전시키는지 여부
light-level: 현재 주변 광량 레벨
max-aspect-ratio: 디스플레이 영역의 너비와 높이 사이의 최대 비율
max-color: 출력 장치 당 색상 구성 요소당 최대 비트 수
max-color-index: 장치가 표시할 수 있는 최대 색상 수
max-height: 브라우저 창과 같은 디스플레이 영역의 최대 높이
max-monochrome: 단색(그레이스케일) 장치에서 "색상" 당 비트 수의 최대값
max-resolution: dpi 또는 dpcm을 사용하여 장치의 최대 해상도
max-width: 브라우저 창과 같은 디스플레이 영역의 최대 너비
min-aspect-ratio: 디스플레이 영역의 너비와 높이 사이의 최소 비율
min-color: 출력 장치 당 색상 구성 요소당 최소 비트 수
min-color-index: 장치가 표시할 수 있는 최소 색상 수
min-height: 브라우저 창과 같은 디스플레이 영역의 최소 높이
min-monochrome: 단색(그레이스케일) 장치에서 "색상" 당 비트 수의 최소값
min-resolution: dpi 또는 dpcm을 사용하여 장치의 최소 해상도
min-width: 브라우저 창과 같은 디스플레이 영역의 최소 너비
monochrome: 단색(그레이스케일) 장치에서 "색상" 당 비트 수
orientation: 뷰포트의 방향(가로 또는 세로 모드)
overflow-block: 블록 축을 따라 뷰포트를 넘어가는 콘텐츠를 출력 장치가 어떻게 처리하는지
overflow-inline: 인라인 축을 따라 뷰포트를 넘어가는 콘텐츠를 스크롤할 수 있는지 여부
pointer: 주요 입력 메커니즘이 포인팅 장치인지, 그리고 정확성이 어떤지
resolution: dpi 또는 dpcm을 사용하여 출력 장치의 해상도
scan: 출력 장치의 스캔 과정
scripting: 스크립팅(예: JavaScript) 사용 가능 여부
update: 출력 장치가 콘텐츠의 모양을 얼마나 빨리 변경할 수 있는지 여부
width: 뷰포트 너비
