미디어 쿼리 완벽 가이드

미디어 쿼리(Media Query)는 CSS의 일부로, 특정 웹페이지를 출력하는 장치나 미디어 타입에 따라 스타일을 다르게(조건부로) 적용할 수 있도록 하는 기술입니다. 즉 미디어 쿼리를 통해 화면 크기, 해상도, 디바이스 종류(데스크톱, 태블릿, 모바일 등) 다양한 기기와 상황에 따라 최적화된 디자인(CSS)을 제공할 수 있습니다. 미디어 쿼리는 `@media`라는 키워드로 시작하며 미디어 타입(주로 screen)과, 미디어 기능(EX: min-width: 400px)으로 구성됩니다. 위의 예시 @media screen and (min-width: 400px) {}는 해당 화면의 너비(뷰포트)가 최소 400px인 경우 미디어 쿼리를 통해 해당 CSS를 적용하는 예시입니다. 소개해 드리는 포스트에서는 미디어 쿼리가 구성되는 방식(논리연산자, 네스팅), 기능 (종횡비, 컬러 스킴) 및 출시 예정될 미디어 쿼리 기능까지 자세하게 안내하고 있습니다. 반응형을 구현하기 위해 미디어 쿼리를 사용해야 할 때 유용하게 참고할 수 있을 것 같습니다.