키스세븐지식
[화면크기에 따라 달라지는 CSS의 @media]
반응형 홈페이지, 반응형 웹페이지 등의 용어가 대세입니다.
여러가지 설명할 것들은 많지만, @media에 대해 간단하게 알아 볼까 합니다.
왜 반응형인가?
과거에는 방문자들이 PC에서 홈페이지나 블로그를 찾아 왔지만, 스마트폰 열기가 시작된 이후로는 모바일을 통한 방문 비중에 매우 높아졌기 때문입니다.
문제는 PC의 모니터 크기와 모바일의 화면 크기(해상도)가 다른 것에 있습니다.
모바일 방문자가 늘어나면서 웹마스터들은 고민을 하기 시작했습니다.
홈페이지를 PC용과 모바일용으로 따로따로 만들어야 하는가?
물론 처음에는 각각 만들었었습니다. 하지만 같은 것을 두고 두번의 작업을 다시 해야 한다는 비효율 문제가 대두되었습니다. 더구나, 4인치 대 부터 5.5인치, 6인치를 넘는 스마트폰과 8인치 10인치를 넘는 태블릿, 거기에다가 웹북까지... 이 많은 종류의 해상도를 가진 접속 기종을 일일이 다 대응하기에는 너무 할 일이 많아졌던 것입니다.
그래서 어떤 기기로 접속하든 그 기기에 맞는 형태의 디자인을 보여줄 수는 없을까 하는 것이 바로 반응형 웹에 대한 개념입니다.
해상도에 따라 판단하는 방법
반응형 사이트를 만들기 위해서는 매우 많은 것들이 조합되어야 합니다. 웹표준 구조의 코딩, 스타일시트의 적용, 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라는 연결자로 두 해상도 사이의 크기를 가진 미디어라면 글자를 다르게 할 수도 있습니다.
{ } 안에는 수 많은 명령을 넣을 수 있기 때문에, 문자의 크기, 색상, 바탕, 이미지 등등 가능한 모든 명령을 입력해 놓을 수 있습니다. 이 부분이 바로 무한한 응용의 핵심인 부분입니다.
좀 더 창의적인 응용
만약 해상도가 너무 작을 경우 특정 객체나 이미지 등을 보이지 않게 하려면 어떻게 할까요?
우선 Div를 작성하고 스타일을 부르기 위해 class명을 지어 줍니다.
<div class="sample">
글자나 내용
</div>
그리고 나서 CSS파일을 열어서 입력을 해 줍니다.
.sample { width:800px; height:600px; }
@media(max-width:720px) { .sample { clear:both; width:0px; height:0px; display:none; } }
위와 같이 하면 일반적인 해상도에서는 .sample부분만 실행합니다. 가로 800, 세로 600으로 표현을 하라는 뜻입니다.
그와 함께 max-width:720px일 때라는 조건제어문을 추가했습니다.
max-width:720px일 때는 가로 0, 세로 0, display 없음으로 표현하여 아예 화면에서 보이지 않게 됩니다.
display:none는 화면 상에서 자리도 차지하지 말고 없는 듯이 하라는 명령입니다.
위와 같이 하면 첫 줄의 .sample부분에서 처럼 보통의 상황일 때는 가로 세로의 크기를 가지게 되고, @media부분에서 처럼 특정한 상황일 때는 크기를 갖지 못하도록... 상황에 따른 명령을 줄 수도 있는 것입니다.
{ } 안의 내용을 윗 줄과 바꾸면 그 반대의 경우도 만들어 낼 수 있습니다.
어떨 때 사용하는 방법이 또 있을까?
- 애드센스를 달았는데, 모바일의 화면이 너무 작기 때문에 모바일로 접속한 방문자에게는 2개의 광고만 보이게 하고, PC로 접속하는 방문자에게는 3개의 광고를 보이게 하려는 경우에도 사용할 수 있겠습니다.
- PHP문, ASP문 등을 쓴다면 if문을 통하여 특정 상황에 대한 그때 그때의 제어를 할 수 있겠으나 블로그 같은 경우엔 이런 제어문을 쓸 수 없으므로 대용으로 사용하는 것도 가능할 것입니다. (물론 한계는 있겠지만...)
- 이미지나 글 내용을 어떨 때는 보여주지 않고, 어떨 때는 보여줄 때에도 유용하겠습니다.
뿐만 아니라 상황에 따라 글자의 크기를 준다거나 색상, 모양 등을 따로따로 구분해서 쓸 때도 유용하겠습니다.
동적인 홈페이지, 반응형 사이트를 구축할 때 뿐만 아니라 계정을 얻어서 운영하는 블로그 등에서도 유용한 방법이 아닐까 합니다.
★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
