[css]미디어쿼리

뷰포트에 따라 css가 달라지는 반응형 웹을 만들고 싶다면 미디어 쿼리를 사용하면 된다.

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

예)
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

위 코드와 같은 경우, 뷰포트 width가 400px이하인 경우에만 css가 적용된다.

적용 가능한 미디어 타입 종류
all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더

• 방향성
  세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사 할 수 있습니다.

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

• 논리곱(and) 미디어 쿼리
  and를 사용해 미디어 기능을 합칠 수 있습니다.

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

여기서 HTML 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다. 두 조건을 모두 만족해야지 쿼리 안의 CSS 스타일이 적용 됩니다.

• 논리합(or) 미디어 쿼리
  콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용시킬 수 있습니다.

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

이런 식으로 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우 텍스트는 파란색이 됩니다. 이 중 하나라도 조건을 만족한다면 쿼리 안의 CSS 스타일이 적용 됩니다.

• 부정(not) 미디어 쿼리
  not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용시킵니다.

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

이 예시는 방향이 세로인 경우에만 텍스트가 파란색으로 적용이 되게 됩니다.