16. 미디어 쿼리

 

미디어 쿼리 (media query)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.

즉, 접속하는 기기의 화면 크기에 따라 레이아웃이 달라지도록 설정하는 것이다.

 

미디어 쿼리 구문

• only: 전체 쿼리가 일치할 경우에만 스타일 적용
• and: 조건을 어려 개 연결해서 추가
• not: not 다음에 지정하는 미디어 유형을 제외하고 적용   ex) not tv : tv를 제외한 미디어들에 적용
• , (쉼표) : 조건들 중 하나라도 참이면 적용

//기본형
 @media [only | not] 미디어 유형 [and 조건] * [and 조건]

//예시
@media screen and (min-width: 768px) and (max-width: 1432px) {...}

 

 

미디어 유형

• all : 모든 미디어 유형
• print : 인쇄 결과물 및 출력 미리보기 화면
• screen : 컴퓨터, 스마트폰 스크린
• tv, aural, braille, handheld, tty 등

 

미디어 속성

• width, height : 웹 페이지의 가로, 세로
• min-width, min-height : 웹 페이지의 최소 너비, 높이
• max-width, max-height: 웹 페이지의 최대 너비, 높이
• device-width, device-height: 단말기의 가로, 세로

- 활용 코드

      /* 미디어 쿼리 */
      /* max-, min- 접두사 사용 가능 */
      @media screen and (max-width: 1000px) {
        body {
          background-color: red;
        }
      }

      @media screen and (max-width: 600px) {
        body {
          background-color: blue;
        }
      }