미디어 쿼리란?
미디어 쿼리(Media Queries)는 css3 모듈 중 하나로, 사이트에 접속하는 기기별로 적용할 css 파일을 다르게 지정해 주는 기술입니다. 예를 들어, 데스크톱일 경우에는 pc.css를 적용 하고, 스마트폰일 경우에는 phone.css를 적용하도록 해서 각 기기마다 서로 다른 레이아웃을 표시할 수 있습니다. 특히, 미디어 쿼리는 다른 반응형 웹 기술과 달리 자바스크립트 라이브러리를 추가하면 인터넷 익스플로러 8 이하 버전을 비롯한 여러 브라우저에서 사용할 수 있다는 장점이 있습니다.
 |  |  |
국립현대미술관(http://www.mmca.go.kr/)
즉, 모바일용 사이트를 따로 제작하지 않고도 하나의 사이트로 모든 기기에 대응할 수 있는 것입니다.
이 사이트에서 사용한 미디어 쿼리를 보겠습니다. http://www.mmca.go.kr/css/main.css로 접속하면 파일 내용을 볼 수 있습니다.
소스를 아래로 훑어보면 다음과 같은 구문을 볼 수 있습니다. 이 부분이 바로 1260px 이하의 화면에서 어떻게 보이게 할 것인지를 지정하는 미디어 쿼리입니다.
@media screen and (max-width: 1206px){ ... }
main.css는 아래 구문에 이르기까지 화면 크기에 따라 다양하게 표시할 수 있도록 @media 구문이 여러 개 사용된 것을 볼 수 있습니다.
@media screen and (max-width: 430px){ ... }
미디어 쿼리 사이트의 동작 방법을 좀 더 살펴보고 싶다면 http://mediaqueri.es로 접속해 보세요. 미디어 쿼리를 이용한 해외 사이트들이 등록 날짜별로 나열되어 있고, 사이트 썸네일 이미지를 클릭하면 해당 사이트로 이동할 수 있습니다.
미디어 쿼리로 반응형 웹 만드는 방법
미이더 쿼리를 사용하기 위해서는 css를 정의하는 <style> 태그 안에 다음과 같은 구문을 삽입합니다.
@media [only:not] 미디어 유형 [and 조건] * [and 조건]
- @media : 스타일 시트 안에서 미디어 쿼리를 시작하는 속성입니다.
- only : 미디어 쿼리를 지원하지 않는 브라우저에서 미디어 쿼리문을 건너뛰도록 하기 위해 사용하는 접두어입니다. 기본값이 only이므로 생략해도 됩니다.
- not : only 접두어 대신 not을 사용하면 그 뒤에 오는 모든 조건을 부정합니다. 즉, 그 조건에 맞지 않을 경우에 스타일 시트를 적용합니다.
- 미디어 유형 : 화면인지 프린터인지, TV인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분입니다. 쉼표(,)를 사용해 여러 가지 미디어 유형을 나열할 수 있습니다. 자주 사용하는 값은 다음과 같으며 기본값은 all입니다.
all |
모든 미디어. 생략했을 때 기본값입니다. |
screen | 스크린. 컴퓨터와 스마트폰 모두 해당 |
| 인쇄장치 | |
tv | 음성과 영상이 동시 출력되는 TV |
aural | 음성 합성 장치 |
braille | 점자 표시 장치 |
handheld | 손에 들고 다니는 장치 |
projection | 프로젝터 |
tty | 디스플레이 기능이 제한된 장치 |
embossed | 페이지에 인쇄된 점자 표지 장치 |
- 조건 : 미디어 유형 외에 기기와 관련된 조건을 지정한 후 해당 조건에 맞는 경우에만 css가 적용되도록 할 수 있습니다. 조건은 괄호()로 묶어서 표현하며 둘 이상의 조건을 나열할 경우 and 연산자를 사용합니다. 다음은 미디어 쿼리에서 사용하는 조건 속성들 중 일부입니다. 이 속성들 중에서 min-이나 max-접두어를 붙여 최솟값이나 최댓값을 표현할 수 있습니다.
디스플레이 |
width |
웹 문서의 너비 |
height |
웹 문서의 높이 |
|
device-width |
기기의 너비 |
|
device-height |
기기의 높이 |
|
orientation |
landscape(가로),portrait(세로) |
|
aspect-ratio |
화면의 비율 |
|
device-aspect-ratio |
기기의 물리적 화면 비율 |
|
resolution |
기기의 해상도 |
|
색상 |
color |
기기의 비트 수 |
color-index |
기기의 색상 수 |
모바일 기기를 먼저 고려해 css를 작성할 때 가장 많이 사용하는 미디어 쿼리의 중단점은 다음과 같습니다.
1. 모바일 페이지 : 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 css로 작성합니다.
2. 태블릿과 노트북 : 태블릿이나 노트북 화면의 긴 쪽(가로) 너비는 1024px로 가정했습니다. 그래서 768px 과 1024px 사이 값을 태블릿이나 노트북 크기로 지정합니다.
3. 데스크톱 페이지 : 화면 크기가 1025px 이상이면 데스크톱으로 설정합니다.
@charset "utf-8" /* 모바일 기기 : 너비가 767px 이하일 경우 */ { ..... } /* 태블릿 또는 노트북 : 너비가 768px ~ 1024px 일 경우 */ @media all and (min-width:768px) and (max-width: 1024px) { ..... } /* 데스크톱: 1025px 이상일 경우 */ @media all and (min-width: 1025px) { ..... } |
미디어 쿼리로 반응형 내비게이션 만들기
반응형 웹사이트에서 중요하게 고려해야 할 요소 중 하나가 내비게이션입니다. 데스크톱 화면과 스마트폰 화면에서 함께 사용할 웹 사이트이기 때문에 두 가지 환경을 다 고려한 내비게이션을 만들어야 합니다. 가장 많이 쓰는 방법은 데스크톱에서는 가로로 길게 표시하고 스마트폰에서는 트리거를 사용해 필요할 때만 메뉴를 표시하는 방법입니다.
이번 실습에서는 반응형 웹 사이트에서 가장 많이 사용하는 햄버거 메뉴를 만들어 보겠습니다.
 |  |
데스크톱, 태블릿, 스마트폰 (넓은, 중간, 좁은)
1. 만들 내비게이션은 스마트폰에서도 함께 사용할 것이기 때문에 모바일 화면에서도 알맞은 크기로 표시될 수 있도록 뷰포트를 설정하는 메타 태그를 추가합니다. 다음과 같은 소스를 <title> 태그 다음에 추가합니다.
<meta name="viewport" content="width=device-width, inital-scale=1, maximum-scale=1"> |
2. <body> 태그 다음에 내비게이션을 만드는 마크업을 추가합니다. 마지막에 있는 'MENU' 항목은 실제 메뉴가 아니라 스마트폰 화면에서 터치할 수 있는 트리거 항목으로, 데스크톱이나 태블릿화면에서는 나타나지 않게 할 것 입니다.
<nav class="clearfix"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WEB</a></li> <li><a href="#">DESIGN</a></li> <li><a href="#">CONTACT</a></li> </ul> <a href="#" id="trigger">MENU</a> </nav> |
3. <style> 태그 안에 내비게이션 전체를 정의하는 <nav> 태그와 실제 메뉴 링크를 묶고 있는 <ul> 태그에 대한 스타일을 정의합니다.
nav { height: 40px; width: 100%; background: #34495e; font-size: 1em; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #34495e; } nav ul { padding: 0; margin: 0 auto; width: 600px; height: 40px; } nav li { display: inline; float: left; } |
4. nav li에 정의했던 float: left를 해제하기 위해 nav와 ul에 클리어픽스 핵 css를 지정하겠습니다. 아래 소스를 <style> 태그 안의 body 스타일 위에 작성하세요.
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } |
5. 이제 메뉴 항목에 대한 스타일을 만들어 보겠습니다. 메뉴가 모두 6개이므로 각 메뉴 항목의 너비는 100px로 정합니다. 메뉴 항목의 오른쪽에 세로선을 넣는데 마지막 항목에는 넣지 않습니다. 아래 소스를 <style> 태그 안의 nav li 스타일 아래에 삽입하세요.
nav a { color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #283744; } nav li a { border-right: 1px solid #576979; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav li:last-child a { border-right: 0; } nav a:hover, nav a:active { background-color: #8c99a4; } |
6. 5번 단계에 이어서 아래 소스를 입력합니다. #tigger 요소는 스마트폰 화면에만 표시할 것이므로 기본 화면에서는 감춥니다.
nav a#trigger { display: none; } |
8. 미디어 쿼리를 이용해 태블릿용과 스마트폰용 내비게이션 만들기
메뉴가 표시되는 ul의 너비를 600px로 지정했기 때문에 600px 이하면 태블릿 화면을, 320px 이하면 스마트폰 화면을 표시하도록 하겠습니다. </style> 태그 앞에 다음과 같은 미디어 쿼리 소스를 입력합니다.
@media screen and (max-width: 600px) { } @media only screen and (max-width : 320px) { } |
9. 태블릿 화면에서는 메뉴가 화면 너비를 가득 채우며, 화면 왼쪽과 오른쪽에 하나씩 총 3줄로 표시되도록 할 것입니다.
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
10. 스마트폰을 위한 미디어 쿼리에 아래와 같이 메뉴를 위한 스타일 소스를 추가합니다.
nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #576979; } |
11. 스마트폰 화면에서는 트리거를 표시할 것이므로 #trigger 요소를 display:block 으로 지정하면서 그에 대한 스타일도 지정합니다.
nav a#trigger { display: block; background-color: #283744; width: 100%; position: relative; } nav a#trigger:after { content: ""; background: url('nav.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } |
12. 이제 트리거를 터치하면 메뉴가 나타났다가 한 번 더 터치하면 메뉴가 사라지게 하기위해 jQuery의 slideToggle() 메서드를 이용합니다. 아래 소스를 </head> 태그 전에 삽입합니다.
<script src="js/jquery-2.1.3.min.js"></script> <script> $(function () { var trigger = $('#trigger'); var menu = $('nav ul'); $(trigger).on('click', function (e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function () { var w = $(window).width(); if (w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); </script> |
jquery 파일은 따로 다운하여 추가해줍니다.
13. 브라우저에서 확인해 보면 600px 이하로 줄였을 때와 320px 이하로 줄였을 때 메뉴의 모습이 바뀌는 것을 볼 수 있습니다.
600px 이하일 경우
 |  |
320px 이하일 경우
Results File :
mq-nav.html'Skills > Web' 카테고리의 다른 글
| 반응형 웹사이트 만들기 (플랫 디자인&카드 UI - 0) (0) | 2016.01.19 |
|---|---|
| 반응형 웹사이트 만들기 (기본 구성 요소 3 - 가변 이미지와 가변 동영상) (0) | 2016.01.19 |
| 반응형 웹사이트 만들기 (기본 구성 요소 1 - 가변 그리드) (0) | 2016.01.14 |
| 반응형 웹사이트 만들기 (반응형 웹 이란? - 0) (0) | 2016.01.13 |
| hover (mouseover, mouseout) (0) | 2014.01.13 |
