Responsive Design, @media

Responsive Design

현재 컴퓨터뿐만 아니라 모바일로도 인터넷을 사용하고 있고 그 인터넷으로 많은 사이트들을 이용한다. 그런데 컴퓨터와 모바일의 크기는 다르다. 그래서 어느 한 쪽에만 맞게 디자인을 하게 된다면 다른 한쪽에서는 사용하기가 많이 불편헐 것이다. 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절게 동작해야할 필요성 대두되었다.
화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인이 반응형 디자인이다.

@media

@media는 반응형 디자인을 구성하는 핵심적인 기술이다. style 태그 내에 @media(조건문) { 실행 } 형식으로 작성한다. 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수 있다.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
        border:5px solid green;
        font-size:60px;
      }
      @media(min-width:800px) {    /* 화면 크기가 800px보다 큰 경우 */
        div {
          display:none;            /* div 태그의 display를 안 보이게 처리 */
        }
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>

위 예시사 반응형 디자인의 간단한 예시이다.
화면이 800px보다 더 지면 div태그를 보이지 않게 해주는 것이다.

좋은 웹페이지 즐겨찾기