mediaquery

반응형 웹 디자인을 위한 mediaquery

인터넷을 사용하거나 모바일을 사용할때 화면의 크기는 사용자마다 제각각 다를 것입니다. 컴퓨터를 사용할때는 해상도나 웹브라우저 크기를 조정하여 사용함에 따라서 달라지고, 모바일의 경우에는 제품마다 그 크기가 달라서 이에 맞춰 웹디자인을 하기는 힘듭니다. 이를 위해 CSS에서 mediaquery를 이용하여 이 문제를 해결할 수 있도록 제공합니다.

 

사용방법은 다음과 같습니다.

 

   @media ( 화면폭 ) {

                실행 내용

    }

 

화면폭에는 화면크기의 폭을 설정합니다. 속성은 다음과 같습니다.

 

max-width : 화면 최대 폭 설정

min-width : 화면 최소 폭 설정

 

@media를 사용할때 모바일 중심으로 디자인할 것인지 아니면 컴퓨터 중심으로 디자인할 것인지를 결정하여 각각에 맞게 CSS 파일을 작성하는 것이 좋습니다.

 

  ㄱ. 모바일 중심으로 디자인할 경우

     작은 값에서 큰 값 순으로 작성하며 min-width를 사용합니다.

 

        @media ( min-width : 화면 폭 최소값 ) {

                   실행 내용

         }

 

   ㄴ. 컴퓨터 중심으로 디자인할 경우

     큰 값에서 작은 값 순으로 작성하며 max-width를 사용합니다.

 

        @media ( max-width : 화면 폭 최대값 ) {

                   실행 내용

         }

 

예제)

  컴퓨터 중심으로 디자인하며 사각요소의 색깔이 가로폭에 따라 변화하는 CSS 파일을 작성하려 합니다.

 

[그림1] HTML 파일 내용

 

[그림2] CSS 파일 내용

[CSS 파일 내용 분석]

 

div {width: 400px; height: 400px; background: blue;}

   ; 가로 세로 400px 크기의 사각형을 만들며 바탕색은 blue로 설정하였습니다.

 

 

@media (max-width:1024px) {

    div {background: red;}

}

  ; 화면 가로폭이 최대 1024px인 경우에는 가로 세로 400 px 크기의 사각형 바탕색을 red로 설정하였습니다.

 

 

 

@media (max-width:640px) {

    div {background: green}

}

  ; 화면 가로폭이 최대 640px인 경우에는 가로 세로 400 px 크기의 사각형 바탕색을 green으로 설정하였습니다.

 

 

[그림1]의 HTML 파일을 실행하면 다음과 같은 결과를 얻을 수 있습니다.

 

 

HTML 파일 실행 결과