반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

Responsive WEB (반응형 웹) 맛보기

2012. 6. 13. 05:09 | Posted by 솔웅


요즘 브라우저 크기를 줄이면 화면 레이아웃이 갑자기 바뀌는 웹사이트를 가끔 봅니다.

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선택자 영역은&nbsp;화면에서 생략 */
}



보시면 여기서는 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으로 했습니다.


개념만 이해하기 위해 아주 간단한 예제를 살펴 봤습니다.



반응형

Comment