9일차 - 미디어 쿼리

근성 2024. 1. 9. 01:26

요즘은 반응형 디자인이 유행이다.

화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹 디자인.

영어로 responsive web이라고 한다.

미디어 쿼리는 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 되는것이다.

아래 코드를 보자.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div{
        border: 10px solid green;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body
</html>

화면 크기의 비율에 따라서 초록색 직사각형의 비율이 동작하게 된다.

화면의 너비가 800px보다 크다면 <div>태그에 display:none을 설정하는 코드이다.

    <style>
      div{
        border: 10px solid green;
        font-size: 60px;
      }
      @media(min-width: 800px){
        div{
          display: none;
        }
      }
    </style>

저작자표시 비영리 동일조건 (새창열림)