* Media Query 란?
미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 유용합니다.
미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.
- CSS @media와 @import @규칙을 사용해, 스타일을 특정 조건에 따라 적용할 때.
<link>,<source>, 기타 다른 HTML 요소가 특정 매체만 가리키게 할 때.Window.matchMedia()와MediaQueryList.addListener()JavaScript 메서드를 사용해 미디어 상태를 판별하고 관측할 때.
1. 미디어 유형
미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 not이나 only 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 all을 사용합니다.
- all : 모든 장치에 적합
- print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서.
- screen : 주로 화면 대상.
- speech : 음성 합성장치 대상.
2. 미디어 특성
미디어 특성은 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다.
미디어 특성 표현식은 선택사항이며 특성의 존재 여부와 값을 판별합니다.
각각의 미디어 특성 표현식은 괄호로 감싸져야 합니다.
- width : 뷰포트 너비.
- height : 뷰포트 높이.
- aspect-ratio : 뷰포트 가로세로비.
- orientation : 뷰포트 방향.
- resolution : 출력 장치의 해상도.
- scan : 출력 장치의 스캔 방법.
- grid : 격자와 비트맵 중 출력 장치가 사용하는 화면.
- update : 출력 장치가 화면을 업데이트하는 주기.
- overflow-block : 블록 축의 내용이 넘쳤을 때 출력 장치가 처리하는 방법.
- overflow-inline : 인라인 축의 내용이 넘쳤을 때 스크롤의 가능 여부.
- color : 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0.
- color-gamut : 사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위.
- color-index : 출력 장치의 색상 룩업 테이블(LUT) 항목 수, 존재하지 않을 땐 0.
- display-mode : 웹 앱 매니페스트의 display 항목이 정의한 애플리케이션의 표시 모드. Web App * Manifest 명세에서 정의
- monochrome : 출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0.
- inverted-colors : 사용자 에이전트나 운영체제가 색을 반전 중인지 여부.
- pointer : 포인팅 장치가 주요 입력 수단인지 여부와, 그렇다면 그 정확도.
- hover : 주요 입력 수단으로 요소 위에 호버할 수 있는지 여부.
- any-pointer : 입력 수단 중 포인팅 장치의 존재 여부와, 존재한다면 그 정확도.
- any-hover : 어떤 입력 수단으로 요소 위에 호버할 수 있는지 여부.
- light-level : 환경의 광도. Media Queries Level 5에서 추가
- prefers-reduced-motion : 사용자가 줄어든 움직임을 선호함.
- prefers-reduced-transparency : 사용자가 줄어든 투명도를 선호함.
- prefers-contrast : 사용자가 시스템에 고대비/저대비를 요청했는지 여부.
- prefers-color-scheme : 사용자가 밝은 테마나 어두운 테마를 선호하는지 여부.
- scripting : 스크립트(JavaScript 등)를 사용할 수 있는지 여부.
3. Matches
let media = window.matchMedia(mediaQueryString)
mediaQueryString 부분에는 css미디어 쿼리 문법이 들어갑니다.
예시)
let m = matchMedia("screen and (min-width: 1024px)");
m.media // -> "screen and (min-width: 1024px)"
m.matches // -> true
matchMedia() 함수는 MediaQueryList를 반환하는데 이 객체는 media와 matches라는 두 프로퍼티가 존재합니다.
media는 사용한 미디어쿼리 문자열을 반환하고 matches는 현재 화면에 미디어쿼리의 범위에 들어가면 true를 반환하고 아니면 false를 반환합니다.
if (matchMedia("screen and (min-width: 1024px)").matches) {
// 1024px 이상에서 사용할 JavaScript
} else {
// 1024px 미만에서 사용할 JavaScript
}
이런식으로 씁니다.
자바스크립트에서 반응형으로 화면이 줄어들때를 감지 하려면
const mediaQ = window.matchMedia("(max-width: 1024px)")
mediaQ.addListener((e) => {
if(e.matches){}
})
이런식으로 씁니다!
* class 체크, 추가, 제거
- classList.contains('') : 지정한 요소에 입력한 class가 있나 체크 하는 방법입니다.
- classList.add('') : 지정한 요소에 입력한 class를 추가하는 방법입니다.
- classList.remove('') : 지정한 요소에 입력한 class를 제거하는 방법입니다.
- classList.toggle('') : 클래스값이 있는지 체크하고 없으면 더하고 있으면 제거한다.
