Responsive Web & Media Query
모바일 웹을 별도로 제작할 필요 없이 하나의 반응형 웹사이트로 사이즈에 맞춰 이미지나, 폰트, 사이즈 및 UI가 자동으로 변환되어 모든 디바이스에서 사이트를 이용할 수 있는 것이다. 반응형 웹의 주요 컨셉은 다음과 같다.
- A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
- Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
- Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능
즉, 반응형 웹은 “유동형 그리드, 가변폭 이미지, 미디어쿼리 개념”을 하나로 묶고 체계화 시킨 용어이다.
그러나 반응형 웹에도 아직 극복해야 할 단점들이 있다.
가장 큰 문제는 IE8 이하에서는 사용이 불가능하다는 점이다.
- 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
- 이미지 리사이징은 단말기의 CPU를 보다 더 많이 사용한다.
- 실제로 사용하지 않은 자원(이미지, CSS)을 전송 받을 수 있다.
- 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 많다 : CSS3의 속성으로 IE8 이하의 버전에서는 사용이 불가능
ie8 이하 버전에 대한 대응
<!–[if lt IE 9]
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
![endif]–>
css Reset ( 새로 추가된 요소들이 inline 요소인지, block 요소인지 판단하기 위해 사용.)
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block; }
Viewport
<head> </head>
| 속성 | 내용 | 단위 | 기본값 | 허용범위 | 특이사항 |
|---|---|---|---|---|---|
| width | viewport의 넓이 | px | 980px | 200 ~ 10,000 | device-width로 지정가능 |
| height | viewport의 높이 | px | 가로화면비율에서 계산된 값 | 200 ~ 10,000 | device-height로 지정가능 |
| initial-scale | 초기 배율값 | 승수지정 120% = 1.2 | viewport에서 계산된 값 | 0 ~ 10 | |
| minimum-scale | 승수 지정 | 승수 | .25 | 0 ~ 10 | |
| maximum-scale | 승수 지정 | 승수 | 1.6 | 0 ~ 10 | |
| user-scalable | 확대,축소 지원여부 | yes, no | yes |
미디어 쿼리 구문 형식
/*
* 미디어쿼리 구문 형식
* 아래 세줄은 동일한 조건
*/
@media only all and (조건문){실행문}
@media all and (조건문){실행문}
@media (조건문){실행문}
/*
* width / height
* 뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다.
* 반응형 웹 구현시 가장 일반적으로 사용하는 조건.
* 1. 뷰포트 너비가 768px 이상 '그리고' 1024px 이하이면 실행
* 2. 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행
* 3. 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행
*/
@media all and (min-width:768px) and (max-width:1024px){ … }
@media all and (width:768px), (width:1024px){ … }
@media not all and (min-width:768px) and (max-width:1024px){ … }
/*
* device-width / device-height
* 스크린의 너비와 높이.
* 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.
* 1. 스크린 너비가 320px '그리고' 높이가 480px 이면 실행
* 2. 스크린 너비가 최소 320px 이상 '그리고' 높이가 최소 480px 이상이면 실행
*/
@media all and (device-width:320px) and (device-height:480px){ … }
@media all and (min-device-width:320px) and (min-device-height:480px){ … }
/*
* orientation
* 뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.
* 1. portrait : 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
* 2. landscape : 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
*/
@media all and (orientation:portrait){ … }
@media all and (orientation:landscape){ … }
/*
* 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않는다
*/
@media all and (min-width:768px){
/* 테블릿 해상도 이상의 CSS 코드만 미디어 쿼리 구문 안쪽에 작성한다 */
}
/* 이것이 바로 모바일 퍼스트. 모바일 코드를 미디어쿼리 구문 바깥쪽에 작성하는 것이 핵심. */
미디어 쿼리 템플릿
/* 공통, 모바일, 테블릿&데스크톱, 테블릿, 데스크톱 순으로 코드를 분리해서 작성. */
@charset "utf-8";
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* Tablet & Desktop Device */
@media all and (min-width:768px){
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}
/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px){
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.
아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}
/* Desktop Device */
@media all and (min-width:1025px){
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.
1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}
반응형으로 리펙토링 하는 경우 데스크톱 CSS 코드를 그대로 재사용할 수 있다.
1024px 이상 해상도 조건의 미디어쿼리 안쪽으로 모든 코드를 옮기고, 모바일과 테블릿 코드를 작성한 다음,
다시 데스크톱 코드를 디버깅 하면 된다.
반응형 웹 잘 정리된 사이트 : https://mediaqueri.es/
국내 반응형 웹 디자인 사이트
현대 자동차 그룹 : https://pr.hyundai.com 신현석 블로그 : https://hyeonseok.com 다음 사전 : https://dic.daum.net/
국외 반응형 웹 디자인 사이트
boston blobe : https://www.bostonglobe.com/ deren : https://www.deren.me/ dconstruct : https://2011.dconstruct.org/ heathlife : https://heathlife.co.uk/
History
- MediaQuery 기본 사용법[최재희 | 2012.11.27]