미디어쿼리

점차 다양한 사이즈의 디스플레이가 생겨남에 따라 웹페이지의 구성도 자동으로 변할 수 있도록 해주는 css코드들을 보고 미디어쿼리라고 한다.

이 두 페이지는 똑같은 네이버 진입페이지임에도 불구하고 차이가 크다. 이런 차이는 반응형을 먹였느냐, 안먹였느냐의 차이이다.

어떻게 쓸까에 대해 알아보자

mdn docs에는,

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

가 가장 기본 포맷이라고 적혀있다. media-type에는
all,
print,
screen,
speech등의 유형을 지정할 수 있다.

너비와 높이가 사실상 반응형 웹의 가장 핵심기능이라고 손꼽을 수 있다.
예를 들어 장치가 가로방향일 때 본문 텍스트 색상을 변경하려면 이런 미디어쿼리를 사용하면 된다.

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

orientation이 landscape(가로방향)일 때 body의 color를 rebeccapurple로 먹여줘, 하는 말이다.

미디어쿼리에서는 and나 not등의 구문을 통해 웹의 뷰를 여러가지 기종의 화면을 지원하게 할 수도 있다.

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

이 쿼리들은 최소너비가 400px이고(400픽셀 이상일 때이고), 장치가 가로모드일 때 폰트컬러를 파란색으로 해달라는 말이다.

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

여기에 , screen이라는 구문을 더해, 스크린 너비가 최소 400px"이거나" 가로방향일때, 라는 의미를 추가할 수 있다. 콤마는 OR의 뜻을 지닌다.

긍정이 있으면 부정도 있는데, not연산자를 통해 '부정논리 미디어쿼리'가 가능하다. 미디어 쿼리 전체의 뜻을 뒤집을 수 있다.

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

이 예제의 경우 only 가로방향일 때만 텍스트가 파란색으로 화면에 뿌려진다.

미디어쿼리에는 "분기점"이라는 개념이 존재한다. 세상에 존재하는 모든 디스플레이들을 특정하여 쿼리를 짜기에는 현실성이 없다. 카테고리를 지정하여 미디어쿼리가 적용되기 시작하는 지점을 보고 분기점(breakpoint) 라고 한다. 파이어폭스 devTools에서 이 분기점을 알아내는것이 유용하다고 한다..

css의 왕이 되고싶다