2. CSS3 미디어쿼리와 스크린 경계 정보
반응형웹 2. CSS3 미디어쿼리와 스크린 경계
본문
목차
우선 해야할 일
반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.
viewport meta tag 설정
요약
아래코드를 <head></head> 에 넣으세요.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
긴설명
반응형 웹으로 디자인 하는 것이므로, iOS 기기에서 데스크탑 웹사이트 (레이아웃)을 보고 싶지는 않을 것입니다. 그러기에 모바일 스크린에 맞게 폭과 스케일을 설정하는 것입니다. 특히, 위 설정은 iOS 전용 설정입니다. Android는 위 설정없이 ‘적절하게’ 렌더링합니다.
width=device-width
모바일 브라우져 (특히 iOS 사파리)에서 디바이스 폭보다 큰 웹페이지를 불러오면 좌우 스크롤이 되도록 렌더링합니다. 이런 문제? 를 해결하기 위해서 width를 device-width로 설정하면 해당 기기의 폭에 맞추어서 웹 페이지를 렌더링합니다. 참고로 Android는 width 설정에 상관없이 화면폭에 맞춰서 렌더링합니다.
viewport 설정이 되어있지 않는 웹 페이지를 iPhone에서 봤을때 (왼쪽)와 viewport 설정이 되어 있는 경우의 iPhone에서 볼떄 (가운데), 그리고 viewport 설정과 상관없이 Android에서 볼때 (오른쪽): 출처 - https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
- 질문
- 그럼 이 설정(width=device-width)을 항상 사용해야 할까요?
- 답
-
- 웹사이트에 유동형 레이아웃을 사용하고 있다면, 위 설정을 사용하는 것이 모바일 기기 (특히 iOS)에서 좋습니다.
- 웹사이트가 고정된 레이아웃을 사용하고 있다면, 큰 차이는 없습니다.
- 모바일 전용 웹사이트라면, 사용하세요.
initial-scale=1.0
많은 모바일 기기의 경우, 웹페이지를 모바일 스크린의 폭에 맞춰서 스케일링합니다. 이를 금지하기 위해서 initial-scale을 1.0으로 설정합니다.
하지만, iOS 기기에서 세로보기와 가로보기를 전환할때, 텍스트의 크기가 자동으로 커지는 버그?가 있습니다. 이 문제를 해결하는 방법으로, 아래처럼, maximum-scale=1.0 과 user-scale=no 로 설정할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
이 경우, 사용자의 줌밍을 금지하게 되므로 조금은 불편해 질 수 있습니다 (참조).
CSS3 미디어쿼리를 사용한 반응형/유동형 레이아웃 이라면, width=device-width, initial-scale=1 로만 설정하면 큰 문제가 없습니다.
target-densitydpi=device-dpi
Android에서 기기의 dpi에 따라서 렌더링 하도록 하는 옵션입니다. iOS와 Windows 폰은 해당되지 않습니다. 결론부터 말하자면, 사용하지 않는 것이 대부분의 모바일 브라우져에서 비슷하게 보이도록 하는 것입니다.
IE9이하를 위한 설정
요약
아래코드를 <head></head> 에 넣으세요.
<!--[if lt IE 9]> <script type="text/javascript" src="/path/to/respond.js"></script> <![endif]-->또는
<!--[if lt IE 9]> <script type="text/javascript" src="/path/to/css3-mediaqueries.js"></script> <![endif]-->
긴설명
IE9 이전버전에서는 CSS3 미디어 쿼리를 지원하지 않습니다. IE6~IE8 을 비롯한 구식 브라우져에서 미디어 쿼리가 작동하길 원한다면, respond.js 나 css3-mediaqueries.js 등의 javascript 을 이용합니다. 두 js의 자세한 차이를 다룬 글이 있습니다. 그 글에서 테스터 웹사이트를 통해서 비교한 결과를 정리하면 다음과 같습니다.
- 두 js 공통적으로 처리하는 경우
- width를 제외한 min, max, min+max 처리
- em, px 수치 처리
- 윈도우 크기 변경시 처리
- 별도의 css 화일 처리
- 두 js 공통적으로 처리하지 못하는 경우
- 조건적 외부 css 화일 연결 (<link media=’screen and …/>
- @import
- css3-mediaqueries.js 는 처리하지만, respond.js 는 안되는 경우
- 페이지에 포함된 <style>...</style> 처리
- jquery를 필요로 하는 respond.js (4kb)가 css3-mediaqueries.js (15kb) 보다 가볍지만, jquery의 on load 이벤트와 충돌할 가능성이 있어서 맨 마지막에 추가해야 함
위 출처의 저자는 css3-mediaqueries.js 를 추천합니다. 하지만, 그누보드처럼 이미 jquery를 기본적으로 포함하는 경우라면, 기능상 큰 차이가 없으므로, 크기가 작은 respond.js 를 이용하는 것도 나쁘지 않다고 생각됩니다.
HTML5와 CSS3 가능 여부를 감지하는 modernizr 또한 자주 같이 사용되기도 합니다.
CSS3 미디어 쿼리
역사
간단한 형태의 미디어 쿼리는 CSS2에서 부터 사용되었습니다.
예제1:
예제2:
@media screen {
* { font-family: sans-serif }
}
즉, ‘screen’이나 ‘print’ 처럼 ‘미디어 타입 (media types)’ 에 따라서 특화된 스타일을 사용할 수 있었습니다. 그밖에 제안되었던 타입들로 ‘all’, ‘aural’ (HTML4), ‘braille’, ‘embossed’ (CSS2), ‘speech’ (CSS2), ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ 등이 있었습니다. 특히 ‘handheld’ 타입은, 현재의 반응형 웹의 징조를 보여주었다고 생각됩니다.
문법
[ only | not ]? 미디어 타입 and (미디어 속성 : 값)
위 문법이 정확한 표현은 아니지만,
- 우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고
- ‘all’, ‘screen’ 등의 미디어 타입 (media type) 과
- ‘min-width’ 와 같은 미디어 속성 (media feature)과 ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서
조건을 표현합니다. 그리고 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’로 계속 추가할 수 있습니다.
조건부 CSS화일
CSS 내의 조건
@media screen and (min-width: 400px) and (max-width: 700px) { … }
미디어 타입 종류
현재 HTML5/CSS3의 미디어 타입 종류는, HTML4/CSS2에서 정의된 것들을 그대로 사용하고 있습니다. 하지만, 대부분 ‘all’, ‘screen’, ‘print’ 정도가 주로 사용되고 있습니다.
미디어 속성
일부 미디어 속성들은 min- 이나 max- 등이 머리말이 붙을 수 있습니다.
width
- viewport의 (스크롤바를 포함한) 가로 길이입니다. 즉 가로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
height
- viewport의 (스크롤바를 포함한) 세로 길이입니다. 즉 세로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-width
- 실제 기기 스크린의 가로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-height
- 실제 기기 스크린의 세로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px 입니다.
orientation
- 지면을 향한 기기의 방향입니다. (세로보기, 가로보기)
- 값: ‘portrait’ 또는 ‘landscape’
aspect-ratio
- 기기의 width와 height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
device-aspect-ratio
- 기기의 device-width와 device-height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
color / color-index / monochrome
- 기기가 표현할 수 있는 색에 관련된 정보입니다.
- 값: 정
- min, max 머리말 사용가능
resolution
- 기기의 픽셀 덴시티 정보입니다.
- 값: 해상도 dpi 또는 dpcm
- min, max 머리말 사용가능
그밖에 TV 에서 사용될 있는 ‘scan’과 특정 출력에 적용되는 ‘grid’ 등이 있습니다.
예제
별도의 CSS 화일 이용
여러 모바일 기기들의 고려한 미디어 쿼리 템플릿
출처: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
... Smartphones (portrait and landscape) ...
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
... Smartphones (landscape) ...
@media only screen
and (min-width : 321px) {
}
... Smartphones (portrait) ...
@media only screen
and (max-width : 320px) {
}
... iPads (portrait and landscape) ...
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
... iPads (landscape) ...
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
... iPads (portrait) ...
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
... Desktops and laptops ...
@media only screen
and (min-width : 1224px) {
}
... Large screens ...
@media only screen
and (min-width : 1824px) {.
}
... iPhone 4 ...
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
모바일 퍼스트 미디어 쿼리 템플릿
출처: http://stuffandnonsense.co.uk/projects/320andup/
// 모바일 (가로 480px 미만) 용 스타일 */
@media only screen and (min-width: 480px) {
// 480px 이상 */
}
@media only screen and (min-width: 600px) {
// 600px 이상 */
}
@media only screen and (min-width: 768px) {
// 768px 이상 */
}
@media only screen and (min-width: 992px) {
// 992px 이상 */
}
@media only screen and (min-width: 1382px) {
// 1382px 이상 */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
// iPhone4+ 레티나 디스플레이 */
}
참고로 기기별로 별도로 모든 스타일을 지정해야 하는 기기별 템플릿과는 달리, 위의 모바일 퍼스트 템플릿의 경우는 아래의 스타일이 기본적으로 적용됩니다.
위 예제에서 보듯이, 어느 가로 크기를 스타일이 변경되는 경계치가 되는 지가 반응형 웹의 실제 구현에서 가장 중요한 전략적 결정사항입니다.
스크린 경계치 (screen breakpoints)
CSS3 미디어 쿼리를 사용할때, ‘min-/max- width’의 값으로 사용할 가로 폭의 경계치를 보통 스크린 경계치 (screen breakpoints) 라고 부릅니다. 이러한 경계치는 결국 많이 사용되는 기기들에 맞추어서 그 경계를 잡게 됩니다.
(아래 내용은 제 블로그 글과 그누스터디 위키를 발췌했습니다.)
대표적인 경계치
기존에 사용되던 경계치를 Andy Clark과 Yiibu가 각각의 발표 자료에서 정리했으며 기본적으로 동일합니다. (발표자료중 해당하는 슬라이더 스샷들입니다: AC, Yiibu). 두 사람은 흔히들 사용되는 중요한 경계치 (major breakpoints)로 320px, 720px, 1024px 를 잡고, 그 중간에 기기별로 세부 경계치 (minor breakpoints)를 잡았습니다.
중요 | 세부 | 기기들 |
240 | 일부 안드로이드(p), 많은 블랙베리들: 많은 S40(p), 거의 모든 S60(p) | |
320 | 아이폰(p), 많은 안드로이드(p), 많은 블랙베리: S60 QWERTY, 거의 모든 S60 (l), S40 QWERTY | |
360 | 심비안 터치 (p) | |
480 | 아이폰(l), 안드로이드(l), 일부 심비안 터치(l), 일부 테블릿(l) | |
600 | 일부 태블릿(p), 이북리더들 | |
640 | 일부 심비안 터치 (l) | |
720 | 특정 기기는 없슴 | |
768 | 아이패드(p), 일부 안드로이드 태블릿 (p) | |
800 | 일부 태블릿(l) | |
1024 | 일부 태블릿, 거의 모든 넷북, 많은 데스크탑 | |
1280 | 일부 태블릿(l) | |
1366 | 많은 노트북 |
트위터 Bootstrap의 경계치
- 480px 이하: 스마트폰
- 481 ~ 767px: 스마트폰 부터 태블릿
- 768 ~ 979px: 태블릿 세로
- 980 ~ 1199px: 기본
- 1200px 이상: 큰 화면
이에 해당하는 미디어 쿼리 템플릿입니다.
// Large desktop */
@media (min-width: 1200px) { ... }
// Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
// Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
// Landscape phones and down */
@media (max-width: 480px) { ... }
mediaquri.es의 경계치
- 320px: 스마트폰
- 768px: 태블릿
- 1024px: 넷북
- 1600px: 테스크탑
자연스러운 경계치 (natural breakpoints)
위 경계치들이 사실상 iOS 기기의 가로/세로 크기에 맞춰져있습니다. 하지만, 반응형웹의 목표인 ‘어떠한 스크린에서도 적절하게 반응하기’ 위해서는, 앞으로 나올 기기들의 가로폭에 ‘자연스럽게’ 대처해야 한다는 주장도 있습니다.
대표적으로 Patrick Grady는 그의 글 (Re-thinking Breakpoints in Responsive Design)에서 기존의 (iOS 기기의) 가로/세로 크기에 딱 맞춘 경계치보다는, 그런 크기를 넉넉하게 포함시킨 경계치를 사용하는 것을 주장했습니다.
예를 들어,
실제 사용된 예로는, Smashing Magazine의 경계치가 있는데, 각각 500, 650, 800, 1020, 1220, 1450 등, 기존 기기들과는 좀 떨어진 경계치들을 사용하고 있습니다.
스크린 경계치 선택
실제로 반응형 웹을 디자인하게 되면,
- 해당 사이트의 내용/구성/레이아웃 등을 반영하고,
- 주요 사용자 층을 고려한 후,
사용할 스크린 경계치와 그 수를 정하게 됩니다.
대부분 스마트폰, 태블릿, 데스크탑, 이렇게 세가지 정도는 최소한 고려해야 할테고, 경계치도 대략 300~500px 를 스마트폰-태블릿의 경계로, 600px~1000px 를 태블릿과 데스크탑의 경계로 잡는 것 같습니다.
어떤 경계치를 선택하게 될지는, 위에서 언급한 사이트 내용/레이아웃 등 디자인 자체의 요소 뿐만아니라,
- 이미 존재하는 템플릿/보일러플레이트/프레임워크 등을 사용하게 되는 경우나,
- (반응형) 그리드 시스템 채택 여부,
- 유지 관리의 비용 증가
들을 종합적으로 고려해야 할것 입니다. 경험이 많지 않다면 기존의 템플릿을 그대로 사용하는 것도 좋은 방법이겠죠.
강좌 내용 원본 링크
- 구글 문서 링크
- 2. 미디어 쿼리와 스크린 경계치
참고문헌/자료
- html5-boilerplate, Viewport and Media Queries: The Complete Idiot's Guide, 구글문서, 2011
- quirksmode.org, A pixel is not a pixel is not a pixel, 2010
- 456bereastreet.com, Controlling text size in Safari for iOS without disabling user zoom, 2010.
- W3C Recommendation, Media Queries, 2012
- Safari Web Content Guide, Configuring the Viewport
- Roger Johansson, Controlling text size in Safari for iOS without disabling user zoom, 456bereastreet.com, 2010
- Android Developers, Targeting Screens from Web Apps
- GionaF, css3-mediaqueries.js VS respond.js, Stack Overflow, 2011
- Patrick Grady, Re-thinking Breakpoints in Responsive Design, 2012
11
댓글 19개
오히려 IE 낮은 버전을 기본으로 CSS를 만들고 respond.js를 쓰지 않는, '데스크탑 퍼스트' 또는 'IE6~8 퍼스트'를 하는 것이 더 낫지 않을까 하는 생각도 해봤습니다. :D
http://blog.gnuboard.org/2012/04/mobile-first-vs-desktop-first/
그걸 정해야 각 스크린별 디자인을 할 수 있으니. ^^
좋은 강좌 감사합니다~
퍼다가 제 홈피에 올려놓아도 되죠? 물론 전진님 출처 밝히구요.
근데 퍼가시는 것에 대해서 다른 분에게 이미 알려드린 바가 있어서..
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=133#c_487
암튼 알겠습니다.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ j/k
출처를 밝히지 말라는 뜻은 아니고요
전문이 아닌 요약된 내용과 링크 형태의 출처를 사용하시라는 뜻이었습니다.
:D
