개요

기술이 발전함에 따라 다양한 디바이스에서 웹을 사용할 수 있게 되었다. 핸드폰의 경우 처음엔 웹 접속이 가능한 휴대폰들이 나왔고 그 다음으론 초창기 스마트폰으로 웹에 접속해서 사용했다. 이 시기에는 동작이 매끄럽지 않고 사용하기 불편했던 것을 기억할 것이다.

그러다 스마트폰이 대중화되기 시작하면서 어떤 디바이스를 사용해도 동작이 매끄럽고 편해졌다.

미디어 쿼리

미디어 쿼리란 뷰포트의 해상도에 따라 CSS를 분기시키는 기법을 말한다.

만약 뷰포트의 크기가 일정한 기준을 벗어나면 이에 맞춰 CSS를 변화시킨다.
이렇게 해서 다양한 디바이스에 대응하는 것이다.

미디어 쿼리는 다음과 같이 사용한다.

@media 타입 and (기능) {
  width: auto;
}
@media screen and (max-width: 800px) {
  width: auto;
}

간단한 예를 살펴보자.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Sample</title>
</head>
<body>
  <div class="container"></div>
</body>
</html>

.container {
  width: 1200px;
  height: 150px;
  margin: 20px;
  border: 5px solid;
  background-color: orange;
}

@media screen and (max-width: 800px) {
  .container {
    margin: auto;
    background-color: blue;
  }
}

위와 같이 작성하고 화면의 크기를 서서히 줄여보면 어느 시점부터는 배경 색깔이 파란색으로 바뀌는 것을 확인할 수 있다. 개발자 도구를 통해 보면 더 명확하다. 개발자도구를 통해 width가 변화하는 것을 보면 위에서 설정한 800픽셀의 전후로 변화가 일어나는 것을 볼 수 있다.

그러나 결과물을 보면 약간의 텀이 생기게된다.
이를 보정하기 위해서 미디어 쿼리를 하나 더 작성해보자.

@media screen and (max-width: 1250px) {
  .container {
    margin: auto;
    backgroud-color: red;
  }
}
@media screen and (max-width: 800px) {
  .container {
    background-color: blue;
  }
}

max-width의 1250px은 위에서 작성한 원본 스타일이 온전히 보이기 위한 최소 가로 너비를 의미한다. 따라서 화면의 크기가 온전히 보일 수 있는 1250px 밑에서는 가로를 브라우저가 자동으로 계산하게하여 가로 너비가 최대한 늘어나게 설정했다.

여기서 기능항목에 설정한 값을 breakpoints, 중단점이라고한다.

위에서는 타입을 screen으로 사용했는데 이 외에도 타입은 tv, projection등 여러가지가 존재한다.

  • print: 인쇄 미리보기와 같은 인쇄된 디스플레이를 재현하기 위한 장치를 의미한다.
  • screen: print가 아닌 모든 기기를 의미한다.
  • all: print와 screen을 함친 기기를 의미하기 때문에 곧 모든 기기를 의미한다.

그 외에 알아두면 좋은 것은 orientation: portrait, landscape로 portrait는 기기의 가로보다 세로가 더 길 때를 의미하고 landscape는 반대로 가로가 세로보다 더 길 때를 의미한다. 쉽게말하면 스마트폰의 디폴트인 세로모드일 때가 portrait인 것이고 가로모드가 landscape인 것이다.

여기까지 간단하게 미디어 쿼리의 필요성과 그 사용법을 알아봤다.

미디어 쿼리는 이렇게 원본 css에서 작성하고 관리할 수 있고 별도의 파일로 작성하는 방법도 존재한다.

<link rel="stylesheet" href="./main.small.css" media="(max-width: 1250px)">

이렇게 사용하면 된다.