CSS Responsive Web Design - Media Queries

description : CSS Responsive Web Design - Media Queries
author : 오션
email : shlim@repia.com
lastupdate : 2021-07-06 Tue

The source of this article

What is a Media Query?

미디어 쿼리(Media Query)는 CSS3에 도입된 CSS 테크닉입니다.

특정 조건이 참인 경우에만 CSS 속성 블록을 포함하는 @media 규칙을 사용합니다.

Example

브라우저 창이 600px 이하인 경우 배경색(background color)은 lightblue가 됩니다.

  <style>
    body {
      background-color: lightgreen;
    }
    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }
  </style>  
</head>
<body>
 
  <p>
    Resize the browser window. When the width ofthis document is 600 pixels or less, 
    the background-color is "lightblue", otherswise it is "lightgreen".
  </p>
 
</body>

Add a Breakpoint

이 튜토리얼의 앞부분에서 row(행)과 column(열)이 있는 반응형 웹 페이지를 만들었지만, 작은 화면에서는 좋지 않았습니다.

미디어 쿼리가 도움이 될 수 있습니다. 디자인의 특정 부분이 중단점(breakpoint)의 각 측면에서 다르게 작동하는 중단점을 추가 할 수 있습니다.

미디어 쿼리를 사용하여 768px 지점에 중단점을 추가합니다.

Example

스크린(브라우저 창)이 768px보다 더 작아지면, 각각의 컬럼은 100%의 너비를 가지게 됩니다.

  <style>
    * {
      box-sizing: border-box;
    }
 
    .row::after {
      content:"";
      clear: both;
      display: block;
    }
 
    [class*="col-"] {
      float: left;
      padding: 15px;
    }
 
    html {
      font-family: 'Lucida Sans', sans-serif;
    }
 
    .header {
      background-color: #9933cc;
      color: #ffffff;
      padding: 15px;
    }
 
    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
 
    .menu li {
      padding: 8px;
      margin-bottom: 7px;
      background-color: #33b5e5;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
 
    .menu li:hover {
      background-color: #0099cc;
    }
 
    .aside {
      background-color: #33b5e5;
      padding: 15px;
      color: #ffffff;
      text-align: center;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
 
    .footer {
      background-color: #0099cc;
      color: #ffffff;
      text-align: center;
      font-size: 12px;
      padding: 15px;
    }
 
    /* For desktop */
    .col-1 { width: 8.33%}
    .col-2 { width: 16.66%}
    .col-3 { width: 25%}
    .col-4 { width: 33.33%}
    .col-5 { width: 41.66%}
    .col-6 { width: 50%}
    .col-7 { width: 58.33%}
    .col-8 { width: 66.66%}
    .col-9 { width: 75%}
    .col-10 { width: 83.33%}
    .col-11 { width: 91.66%}
    .col-12 { width: 100%}
 
    @media only screen and (max-width: 768px) {
      /* For mobile phone: */
      [class*="col-"] {
          width: 100%;
      }
    }
  </style>
</head>
<body>
 
<div class="header">
    <h1>Chania</h1>
</div>
 
<div class="row">
  <div class="col-3 menu">
    <ul>    
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
 
  <div class="col-6">
    <h1>The City</h1>
    <p>
      Chania is the capital of the Chania region on the island of Crete. 
      The city can be divided in two parts, the old town and the modern city.
    </p>
  </div>
 
  <div class="col-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>
        Chania is a city on the island of Crete
      </p>
 
      <h2>Where?</h2>
      <p>
        Crete is a Greek island in the Mediterranean Sea.
      </p>
 
      <h2>How?</h2>
      <p>
        You can reach Chania airport from all over Europe.
      </p>
    </div>
  </div>     
 
  </div>   
  <div class="footer">
    <p>
      Resize the browser window to see how the content respond to the resizing.
    </p>
  </div>
 
</body>

오션,, Responsive, Web, Design, -, Media, Queries

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Responsive Web Design - Media Queries

The source of this article

What is a Media Query?

Example

Add a Breakpoint

Example

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Responsive Web Design - Media Queries

The source of this article

What is a Media Query?

Example

Add a Breakpoint

Example

문서 도구