반응

반응

by duckduck0054

HTML

<html>
  <head>
    <title>반응</title>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    * { margin: 0; padding: 0; }
    .wrap { width: 1001px; margin: 0 auto; }
    .visual { height: 100px; background: purple; }
    .left { float: left; width: 50%; height: 100px; background: skyblue; }
    .right { float: left; width: 50%; height: 100px; background: orange; }
    
    /* @media : 우리가 원하는 브라우저에*/
    /* 최소 width 701부터 최대 witdh 900px까지 body의 background는 red로 합니다.
    */
    @media ( min-width: 701px ) and ( max-width: 1000px ) {
      .wrap { width: 100%; margin:auto; } 
      body { padding: 0 20px;}
    }
    @media ( min-width: 501px ) and ( max-width: 700px ) {
      body { background: blue;}
    }
    @media ( min-width: 0px ) and ( max-width: 500px ) {
      body { background: pink;}
    }
  </style>
  <body>
    <div class="wrap">
      <div class="visual"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
  
</html>