[기타] 미디어 쿼리

학습일 : 2022. 09. 16

---

미디어 쿼리(Media Query)
여러 조건에 따른 선택자 분기를 위해 사용한다.
주로 (브라우저) 화면의 최대 가로 크기의 변화에 따른 선택자를 적용하고자 할 때 사용한다. 다음과 같이 작성한다.

@media screen and (max-width: [원하는 화면 최대 가로 크기]) {
    ...
}

 

위 미디어 쿼리는 스크린(Screen)의 최대 가로 크기가 설정한 [원하는 화면 최대 가로 크기] 이하 일 때
중괄호({, })안의 선택자를 적용하겠다는 뜻.