[반응형 웹] css media query 활용 기초

웹 화면을 보여주는 장치들이 매우 다양한 시대를 살다보니 화면의 크기나 내용물의 모양도 그만큼 다르게 표시해야 할 필요가  있습니다. 예를 들어 PC 화면에서만 보던 웹을 이제는 스마트폰, 태블릿, TV 등에서 보는 세상이 되니 각각의 기기에서 보기에 최적화된 화면으로 자동으로 변경되어 보이게 하는 것이 사용자 친화적인 웹사이트가 갖춰야 할 기본 사양이 되었습니다. 이렇게 장치에 따라 자동으로 다른 화면으로 변경되는 웹을 “반응형 웹”이라고 합니다.

반응형 웹을 만드는 방법은 여러가지가 있는데 그중에 이 글은 css에서 제공하는 media query를 사용하는 방법을 알아보겠습니다.

media query는 처음에 css2에서부터 사용되었는데요, 이 때는 screen 또는 print와 같은 media type에 따른 구분만을 적용해서 아래와 같이 사용했습니다.

또는 아래와 같이 사용했습니다.

 

css3가 발표되면서 media query는 media type 뿐만 아니라 다양한 속성과 조건에 대한 설정이 가능하도록 확장되었습니다. 예를 들어 화면의 크기가 480px 이하인 경우와 그보다 큰 경우에 다른 style을 적용할 수 있게 되었고 화면이 세로상태일 때와 가로 상태일 때에도 다르게 표현할 수 있도록 한다든지 하는 기능들을 추가하여 변화된 기기 사용환경을 반영하였습니다.

 

예를 들어 위 코드를 살펴보면 media 속성에 (max-width: 1024px) 또는 (max-width: 480px)와 같은 값들이 표현되어 있습니다. 이는 브라우저의 가로 크기가 1024px 또는 480px 일때 해당하는 styled을 적용하도록 하는 것입니다.

link 태그에서는 해당 조건이 만족하면 href=””에 연결된 css 파일을 불러와 적용하도록 하는 것이고 style 태그에서는 @media (속성) { … } 와 같이 하여 {} 안의 스타일 정의들이 적용되도록 합니다.

위 코드에서 media query는 조건과 속성의 혼합 형태로 구성되어 있습니다.

only screen and (min-width: 480px) and (max-width: 800px)

이는 오직 screen에서 그리고 화면이 크기가 최소 480px이고 최대 800px 일 때의 스타일 적용에 대해 정의하고 있습니다.

만일 여러 경우에 대해 다른 스타일을 적용하고 싶다면 아래와 같이 해주면 됩니다.

또는

경우에 따라 @import url(“style.css”)와 같이 css 파일을 불러오는 경우도 있는데 이 경우에 media query를 적용하려면 다음과 같이 하면 됩니다.

그러나 아래와 같은 코드는 작동하지 않는다는 점을 꼭 알아두셔야 합니다.

<style type=”text/css”>
   @media only screen and (max-width: 480px) {
      @import url(“max480.css”)
   }
</style>

아래 간단한 예제를 만들어보고 브라우저 사이즈를 변경하여 어떻게 변화하는지 살펴보면 media query의 동작 원리를 알 수 있습니다.

예제에 적용된 설정에 따라 화면의 크기가 480px 이하이면 @media only screen and (max-width: 480px) { … } 가 적용되어 이미지의 너비가 480px, 페이지 배경색이 red로 바뀝니다.

반응형웹_html_20141031_115427

또 화면의 너비가 481px이상 800px 이하이면 @media only screen and (min-width: 481px) and (max-width: 800px) { … } 가 적용되어 이미지 너비는 800px, 페이지 배경색은 green으로 바뀝니다.

반응형웹_html_20141031_115417

마찬가지로 화면이 801px 이상이면 @media only screen and (min-width: 801px) { … } 가 적용되어 이미지 너비는 1000px, 페이지 배경색은 yellow가 됩니다.

반응형웹_html_20141031_115359

이 예제는 아주 단순한 설정만 했지만 실제로는 메뉴의 모양이나 콘텐츠의 크기 등이 바뀌게 하므로 보다 복잡하게 구성될 것입니다만, 원리를 이해하면 더 많은 내용을 설정할 수 있을 것입니다.

 

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기