CSS Advanced - CSS Media Queries - Examples

미디어 쿼리를 사용하는 몇 가지 예제를 더 살펴 보겠습니다.

미디어 쿼리는 다양한 기기에 맞춤형 스타일 시트를 제공하는 데 널리 사용되는 기술입니다.
간단한 예제를 보여주기 위해, 다양한 장치의 배경색을 변경할 수 있습니다:

    body {
      background-color: tan;
      color: black;
    }
 
    /* ~ 600px -> 배경색: olive, font: white
    601px ~ 992px -> 배경색: blue, font: white
    993px ~ -> 배경색: tan, font: black */
 
    /* On screens that are 992px wide or less, the background color is blue */
    @media screen and (max-width: 992px) {
      body {
        background-color: blue;
        color: white;
      }
 
      /* On screens that are 600px wide or less, the background color is olive */
      @media screen and (max-width: 600px) {
        body {
          background-color: olive;
          color: white;
        }
      }
    }

왜 우리가 정확히 992px와 600px를 사용하는지 궁금하십니까? 
이것은 우리가 장치에 대한 "일반적인 중단점(typical breakpoints)"이라고 부르는 것입니다.

다음 예제에서는 미디어 쿼리를 사용하여 다양한 크기의 화면에서 디자인이 다른 반응형 탐색 메뉴를 만듭니다.

    * {
      box-sizing: border-box;
    }
 
    /* Style the top navigaton bar */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
 
    /* Style the topnav links */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
 
    /* Change color on hover */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
 
    /* On screens that are 660px wide or less, 
    make the menu links stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .topnav a {
        /* 너비 601px부터 one line menu */
        /* 너비~600px까지는 스택형(1줄에 하나의 링크가 있는 메뉴가 세 줄에 쌓여 있음) */
        float: none;
        width: 100%;
      }
    }

미디어 쿼리의 일반적인 용도는 유연한 레이아웃(flexible layout)을 만드는 것입니다.
다음 예제에서는, 화면 크기에 따라 4 개, 2 개 및 전체 너비 열 사이에서 달라지는 레이아웃을 만듭니다:

    * {
      box-sizing: border-box;
    }
 
    /* Create four equal columns that floats next to each other */
    .column {
      float: left;  /* 너비가 993px~부터는 한 줄에 4개의 컬럼이 동일하게 25%씩 가지면 표시 */
      width: 25%;
      padding: 20px;
    }
 
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
 
    /* On screens that are 992px wide or less, go from four columns to two columns */
    @media screen and (max-width: 992px) {
      .column {
        /* ~992px까지는 컬럼 1과 컬럼 2가 전체 화면 너비의 50%를 동일하게 가지며 한 줄에 표시된다*/
        width: 50%;
      }
    }
 
    /* On screens that are 660px wide or less, 
    make the columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
 
      /* ~600px까지는 화면 너비의 100%를 차지하는 컬럼 4개가 층을 이루며 쌓인다. */
      .column {
        width: 100%;
      }
    }

Tip:컬럼(column) 레이아웃을 만드는 보다 현대적인 방법은 CSS Flexbox를 사용하는 것입니다
(아래 예제 참조). 그러나 Internet Explorer 10 및 이전 버전에서는 지원되지 않습니다.
IE6-10 지원이 필요한 경우, float를 사용하십시오 (위의 예제처럼).