미디어 쿼리

1. 사용법

1) 외부 .css 파일을 선택적으로 적용

(1) <link rel=”stylesheet” href=”.css 파일 경로” media=”쿼리”> 태그의 media 속성에 쿼리를 적기

<link rel="stylesheet" href=".css 파일 경로" media="쿼리">

(2) <style> 태그 안에 @import url(경로) (쿼리); 구문을 쓰기

<style>
    @import url(경로) (쿼리); 
</style>

2) <style media=”쿼리”> 태그의 media 속성에 쿼리를 적기

<style media="쿼리">
    ...
</style>

3) <style> 태그 안에 @media (쿼리) {…} 구문을 쓰기

<style>
    @media (쿼리) {
        ...
    } 
</style>

2. 쿼리

	설명
min-width, min-height	브라우저의 너비/높이가 이 이상이라면 해당 속성이 적용된다.
max-width, max-height	브라우저의 너비/높이가 이 이하라면 해당 속성이 적용된다.
device-width, device-height	디바이스 화면의 너비/높이가 이 값이라면 해당 속성이 적용된다. 부등호(<, >)를 사용하여 디바이스 화면 크기의 범위에 부합하는 경우에 속성이 적용되게 할 수도 있다.
prefers-color-scheme	브라우저가 light 또는 dark 모드라면 해당 속성이 적용된다.