목차
- 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: 뷰포트 너비
