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를 사용하십시오 (위의 예제처럼).

    * {
      box-sizing: border-box;
    }
 
    /* Contatiner for flexboxes */
    .row {
      display: flex;
      flex-wrap: wrap;
    }
 
    /* Create four equal columns that floats next to each other */
    .column {
      flex: 25%;
      /* 너비가 993px~부터는 한 줄에 4개의 컬럼이 동일하게 25%씩 가지면 표시 */
      padding: 20px;
    }
 
    /* On screens that are 992px wide or less, go from four columns to two columns */
    @media screen and (max-width: 992px) {
      .column {
        flex: 50%;
      }
    }
 
    /* On screens that are 600px wide or less, 
    make the columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .row {
        flex-direction: column;
      }
    }

미디어 쿼리의 또 다른 일반적인 용도는 다양한 화면 크기에서 요소를 숨기는 것입니다.

    div.example {
      background-color: yellow;
      padding: 20px;
    }
 
    @media screen and (max-width: 600px) {
      div.example {
        display: none;
      }
    }

미디어 쿼리를 사용하여 다양한 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있습니다.

  div.example {
      background-color: lightgray;
      padding: 20px;
    }
 
    @media screen and (min-width: 600px) {
 
      /* 화면 너비가 601px부터 폰트 80px  */
      div.example {
        font-size: 80px;
      }
    }
 
    @media screen and (max-width: 600px) {
 
      /* 화면 너비가 600px이하까지 폰트 30px */
      div.example {
        font-size: 30px;
      }
    }

다음 예제에서는 미디어 쿼리를 flexbox와 함께 사용하여 반응형 이미지 갤러리를 만듭니다.

    * {
      box-sizing: border-box;
    }
 
    body {
      margin: 0;
      font-family: Arial;
    }
 
    .header {
      text-align: center;
      padding: 32px;
    }
 
    .row {
      display: flex;
      /* 사진이 블록에서 변경된다. */
      flex-wrap: wrap;
      /* 사진이 다시 블록으로 변경 */
      padding: 0 4px;
    }
 
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 25%;
      /* 화면 너비의 25%를 갖는 컬럼이 4개로 사진 배치  */
      max-width: 25%;
      padding: 0 4px;
      /* 각 컬럼의 좌우 패딩 생김 */
    }
 
    .column img {
      margin-top: 8px;
      /* 각 컬럼의 사진의 상단 마진 생김 */
      vertical-align: middle;
    }
 
    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
      .column {
        /* 너비 601 ~ 800px까지는 컬럼2개*/
        flex: 50%;
        max-width: 50%;
      }
    }
 
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      /* 너비 600px 이하까지는 컬럼1개 */
      .column {
        flex: 100%;
        max-width: 100%;
      }
    }

다음 예제에서는 플렉서블 네비게이션 바와 유연한 콘텐츠가 포함된 반응형 웹 사이트를 만들기 위해,
flexbox와 함께 미디어 쿼리를 사용합니다.