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와 함께 미디어 쿼리를 사용합니다.

    * {
      box-sizing: border-box;
    }
 
    /* Style the body */
    body {
      font-family: Arial;
      margin: 0;
    }
 
    /* Header/logo Title */
    .header {
      padding: 60px;
      text-align: center;
      background: #1abc9c;
      color: white;
    }
 
    /* Style the top navigation bar */
    .navbar {
      /* link */
      display: flex;
      background-color: #333;
    }
 
    /* Style the navigation bar links */
    .navbar a {
      color: white;
      /* white font */
      padding: 14px 20px;
      /* 상하14px 좌우20px */
      text-decoration: none;
      /* link 밑줄 삭제 */
      text-align: center;
      /* 적용이 왜 않되는 거지? */
    }
 
    /* Change color on hover */
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
 
    /* Column container */
    .row {
      display: flex;
      flex-wrap: wrap;
    }
 
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    .side {
      flex: 30%;
      background-color: #f1f1f1;
      padding: 20px;
    }
 
    /* Main column */
    .main {
      flex: 70%;
      background-color: white;
      padding: 20px;
    }
 
    /* Fake image, just for this example */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }
 
    /* Footer */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
    }
 
    /* Responsive layout - when the screen is less than 700px wide, make the two
    columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
      .row,.navbar {
        flex-direction: column;
      }
    }

미디어 쿼리를 사용하여 브라우저 방향에 따라 페이지 레이아웃을 변경할 수도 있습니다.

브라우저 창이 높이보다 너비가 넓은 경우에만 적용되는 CSS 속성 집합을 가질 수 있습니다.이를 “가로(landscape)“방향이라고 합니다.

방향이 가로 모드인 경우 lightblue 배경색을 사용합니다.

      body {
        background-color: lightgreen;
      }
 
      @media only screen and (orientation: landscape) {
        body {
          background-color: lightblue;
        }
      }

(max-width: ..) 및 (min-width: ..) 값을 사용하여 최소 너비와 최대 너비를 설정할 수도 있습니다.

예를 들어, 브라우저의 너비가 600 ~ 900 픽셀인 경우, <div> 요소의 모양을 변경합니다.

      @media screen and (max-width: 900px) and (min-width: 600px) {
        div.example {
          font-size: 50px;
          padding: 50px;
          border: 8px solid black;
          background: yellow;
        }
      }

추가 값 사용하기: 아래 예제에서는 쉼표를 사용하여 이미 존재하는 쿼리에 추가 미디어 쿼리를 추가합니다
(이는 OR 연산자처럼 작동합니다).

@media screen and (max-width: 900px) and (min-width: 600px),(min-width: 1100px) 
      {
        div.example {
          /* 600px~900px에 적용, 1100px~부터 적용*/
          font-size: 50px;
          padding: 50px;
          border: 8px solid black;
          background: yellow;
        }
      }

모든 미디어 유형 및 기능/표현에 대한 전체 개요는 CSS @media Rule을 참조하세요.

Tip: 미디어 쿼리 중단점(media query breakpoints)을 사용하여 반응형 웹 디자인(다른 장치 및 화면을 대상으로 지정하는 방법)에 대해 자세히 알아 보려면 Responsive Web Design Tutorial를 읽어보십시오.