css 반응형웹 모바일 기기에만 반응하게, 미디어마다 다르게 표시

해상도에 따라 판단하는 방법

반응형 사이트를 만들기 위해서는 매우 많은 것들이 조합되어야 합니다. 웹표준 구조의 코딩, 스타일시트의 적용, HTML5에 맞는 기획, 거기에 해상도별 디자인까지....

그 중에서도 @media를 이용한 해상도별 디자인 표현에 대해 알아보겠습니다. 

@media는 CSS에서 다룰 수 있는 것입니다. CSS는 스타일을 지정해서 블로그, 홈페이지의 모양을 담당하는 부분입니다. 

먼저 알아두어야 할 기본 구조는 이렇습니다.

@media(최소나 최대에 대한 기준) { 그 때의 명령 내용 }

그럼 기본 구조를 이용하여 응용해 보도록 하겠습니다.

아래 코드는 해상도 720px 이상에만 어떤 모양을 만들라는 코드입니다. 

@media(min-width:720px) { color:#cccccc }

min-width:720px는 가로의 크기가 적어도 720px이 된다면, 즉 702px보다 크다면 { } 안의 내용을 실행하겠다는 코드입니다. 위의 코드에서 모바일 크기의 화면 크기로 문서를 보게 된다면 글자가 회색으로 변하게 됩니다. 

아래 코드는 해상도 720px 이하에서만 어떤 모양을 만들라는 코드입니다. 

@media(max-width:720px) { color:#cccccc }

max-width:720px는 가로의 최대크기가 720px를 넘지 않는다면 글자의 색을 회색으로 하겠다는 코드입니다.

위에서 보다시피 @media(최대 또는 최소의 화면 크기 지정) 라는 형식으로 미디어 기기의 크기에 따라 작동을 제어할 수 있습니다. 

그럼, 720px부터 1024px 사이에서만 작동하도록 하려면 어떻게 할까요?

@media all and (min-width:720px) and (max-width:1024px) { color:#cccccc }

와 같이 함니다. and라는 연결자로 두 해상도 사이의 크기를 가진 미디어라면 글자를 다르게 할 수도 있습니다. 

{ } 안에는 수 많은 명령을 넣을 수 있기 때문에, 문자의 크기, 색상, 바탕, 이미지 등등 가능한 모든 명령을 입력해 놓을 수 있습니다. 이 부분이 바로 무한한 응용의 핵심인 부분입니다.