요즘 브라우저 크기를 줄이면 화면 레이아웃이 갑자기 바뀌는 웹사이트를 가끔 봅니다.
Responsive WEB 개념을 이용해서 만든건데요.
요즘 웹페이지를 표시하는 디바이스들이 많이 늘어나다 보니까 하나의 웹페이지를 데스크 탑, 모바일 폰, 타블렛 PC 등 다른 해상도의 디바이스들에 맞는 레이아웃을 각각 만들 필요가 있어 졌습니다.
이 Responsive WEB은 HTML5이 Media Queries 를 이용하여 하나의 소스로 제작된 컨텐츠로 여러 해상도의 화면을 제공할 수 있도록 만드는 개념입니다.
대표적으로 Boston Globe 가 있는데요.
1. A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
2. Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
3. Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능
Responsive WEB에는 이 세가지 개념이 기본적으로 깔려 있습니다.
그런데 이 반응형 웹은 IE8 미만에서는 사용할 수 없다고 합니다.
오늘 제 immediate manager 인 Rajesh 가 Boston Globe를 보여주면서 이거 어떻게 하는지 아냐고 물어보더라구요.
예전에 이 Responsive WEB 소스코드로 한번 연습한 적이 있어서 대충 알려 줬는데요.
많이 까먹어서 제대로 알려주지 못한 것 같네요.
생각난 김에 다시 소스로 정리를 해 두려고 합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<title></title>
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)" >
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)" >
</head>
<body>
<h1>Simple one</h1>
<div id="pc_view">
<h2>Desk Top PC </h2>
<p>Make this browser narrow then 800 px. 브라우저의 너비를 800 px보다 작게 줄여보세요. </p>
<p>You can see Black background and White text. 배경이 검정색에 글자가 흰색으로 바뀔 겁니다. </p>
</div>
<div id="mobile_view">
<h2>Mobile</h2>
<p>Make it wider then 800px. 브라우저의 너비를 800 px이상으로 크게 늘여보세요. </p>
<p>White BG and Black Text. 배경이 흰색에 글자가 검정색으로 바뀔 겁니다. </p>
</div>
</body>
</html>
이게 제일 간단한 소스인데요.
우선 보시면 HTML5를 지정했구요. Charset 을 utf-8으로 하는 메타태그가 하나 있습니다.
그리고 뷰포트 메타태그가 있습니다. width=device-width 로 해서 화면을 사용자 디바이스 width 에 맞춰서 display 되도록 한 겁니다.
이 viewport 관련해서도 별도의 글에서 정리해 둬야겠네요.
그리고 그 다음이 css 파일인데요.
799픽셀 이하짜리와 800픽셀 이상짜리 두개를 따로 마련했습니다.
그리고 태그 안에 media query 가 있습니다. 이 부분에서 해상도에 맞게 css 파일을 불러 오는 겁니다.
그 다음에는 두개의 div 가 있는데 하나는 id가 pc_view 이고 다른 하나는 mobile_view 입니다.
이 id를 가지고 css에서는 어떻게 사용하는지 보죠.
우선 desktop_pc.css 파일 입니다.
@charset "utf-8";
body {
background-color: #fff; /* 배경 색상을 흰색 */
}
#mobile_view {
display : none; /* mobile_view선택자 영역은 화면에서 생략 */
}
보시면 여기서는 mobile_view 의 display 를 none으로 했죠?
그러면 pc_view 만 나오게 됩니다.
그럼 mobile.css를 보실까요?
@charset "utf-8";
body {
color: #FFF; /* 글자 색상을 흰색 */
background-color: #000; /* 배경 색상을 검정 */
}
#pc_view {
display : none; /* pc_view 영역은 화면에서 생략 */
}
역시 pc_view 의 display를 none으로 했습니다.
개념만 이해하기 위해 아주 간단한 예제를 살펴 봤습니다.
'WEB_APP > TIPs' 카테고리의 다른 글
| Google Analytics 에 대해 좀 더 detail 하게 알아보기 (2) | 2012.11.17 |
|---|---|
| Can I use... Site - HTML5 CSS3, Java Script 지원 여부 안내 - (0) | 2012.11.13 |
| JSON 파일 만드는데 도움 주는 툴 (0) | 2012.08.20 |
| iOS 웹클립에 관한 팁 (0) | 2012.06.25 |
| Data Architect와 Data Modeling Architect 에 대한 메모 (0) | 2012.06.25 |
| User Agent Switcher 소개 (0) | 2012.06.12 |
| Entity Relationship Modeling (0) | 2012.06.10 |
| 3D 관련 툴 블랜더(blender) (0) | 2012.02.01 |
| HTML5, JavaScript 관련 툴들 소개 (0) | 2012.01.31 |
| 브라우저가 캔버스 지원 유무 판단하기 (0) | 2011.12.30 |