HTML/CSS - Media Query(반응형 웹사이트 만들기)

1. Media Queries

- Media Query는 오직 CSS만을 이용하여 웹사이트를 보고있는 사용자의 스크린 사이즈를 알 수 있는 방법이다. 이를 이용하여 사용자의 스크린에 맞게 엘리먼트를 다르게 출력하는 반응형 웹사이트를 만들 수 있다.

<style>
      body{
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      div{
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (max-width: 800px) {
        /*스크린의 너비가 800px미만인 경우*/
        div{
          background-color: tomato;
        }
      }
    </style>
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

- 위의 코드에서 처럼, 사용자의 브라우저의 너비가 800px미만인 경우 사각형의 바탕색이 토마토색으로 변하고 800px이상인 경우에는 청록색으로 바뀌게 된다.

[작성 형식]

@media mediaType and (속성: 속성값) and (속성: 속성값)... {

엘리먼트 {

적용할 속성 및 속성값;

}

- 미디어type은 screen, print, speeach가 있다.

- 다양한 속성값을 사용하여 만든 예시를 살펴보자.

예시 1) 화면너비 범위 정하기 - 최소 650px / 최대 750px 일 때, 배경색을 토마토색으로 한다.

 <style>
      body{
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      div{
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (min-width: 650px) and (max-width: 800px) {
        /*스크린의 너비가 800px미만인 경우*/
        div{
          background-color: tomato;
        }
      }
    </style>
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

예시 2) 3가지 화면 범위를 정하여 3가지 다른 색상을 출력하기

    <style>
      body{
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      div{
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (max-width: 600px) {
        /*스크린의 너비가 600px미만*/
        div{
          background-color: tomato;
        }
      }
      @media screen and (min-width: 601px) and (max-width: 1200px) {
        /*스크린의 너비가 601 ~ 1200px사이*/
        div{
          background-color: wheat;
        }
      }
      @media screen and (min-width: 1200px) {
        /*스크린의 너비가 1200px 초과*/
        div{
          background-color: turquoise;
        }
      }
    </style>
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

예시 3) 스마트폰으로 볼 때, 가로모드로 보면 색상이 변하도록 하기 - orientation: landscape 속성

 <style>
      body{
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      div{
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (max-width: 600px) {
        /*스크린의 너비가 600px미만*/
        div{
          background-color: tomato;
        }
      }
      @media (orientation: landscape) {
        /*스크린의 너비가 601 ~ 1200px사이*/
        div{
          background-color: wheat;
        }
      }
    </style>
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

- 가로모드는 orientation: landscape 속성값을 이용한다.

- 세로모드는 orientation: portrait 속성값을 이용한다.

- Media Query는 위의 예시 이외에도 정말 다양한 기능을 갖고 있다. 예를 들면, 사용자의 스크린이 레티나 디스플레이인지 아닌지도 구분할 수 있다. 더 자세한 정보를 알고싶다면 아래 링크를 방문해보자.

developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Using media queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

developer.mozilla.org

저작자표시

'Front-end > HTML + CSS' 카테고리의 다른 글

HTML/CSS - 꿀팁(Tips) (0)	2020.09.11
HTML/CSS - Animation (2)	2020.08.30
HTML/CSS - Transition & Transformation (0)	2020.08.30
HTML/CSS - CSS Variable (0)	2020.08.27
HTML/CSS - State & 속성 선택자(selector) (0)	2020.08.26