    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>뷰포트 단위 사용하기</title>
      <style>
        div {
          height: 48vh;
          background: #ffe;
          border: 1px solid #9cc;
        }
        .flex_h{ background: #fbb; }
        @media (max-height: 500px) {
          .flex_h{ background: #bfb; }
        }
        @media (max-height: 400px) {
          .flex_h{ background: #bbf; }
        }
      </style>
    </head>
    <body>
      <div><b>height: 48vh</b><br>
        창을 위아래로 늘이거나 줄여보자</div>
      <div class="flex_h"><b>height: 48vh</b><br>
        창을 위아래로 늘이거나 줄여보자</div>
    </body>
    </html>