content 부분 customize 하기
Customize windows
window 는 대개 3개의 zone 으로 구성됩니다. : header, content
and footer. 우리는 이 윈도우의 content part 를 어떻게 customize 하는지를 공부합니다. 다른 부분에 대한 customization 은 toolbars chapter 에서 다룰겁니다.
Window 의 content를 어떻게 customize 하는지를 보기 위해 아래 HTML code 를 살펴 보겠습니다.
A minimal window
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<p> Paragraph 7 </p>
<p> Paragraph 8 </p>
<p> Paragraph 9 </p>
</div>
</div>
</body>
</html>
tistory414_01.html한개의 header toolbar와 9개의 paragraph 가 있는 content 를 add 했습니다. 이 window 는 그냥 평범한 모습으로 display 될 겁니다.
window를 어떻게 customize 하는지 이해하기 위해 우리가 작성한 이 코드가 jQuery Mobile 에 의해 어떤 HTML 코드로 generate 되는지를 살펴보세요. 아래는 Firefox 브라우저의 Firebug 로 본 모습입니다.
window 의 content 부분에 해당하는 <div>
element 를 보시면 ui-content
CSS class 가 있는 걸 보실 수 있을 겁니다. (원본 소스에는 없었던 거죠) 만약 이 스타일을 우리의 HTML page에 정의해 넣는 다면 이 window contents 는 약간 다르게 보일겁니다.
Changing the style associated with the contents of the window
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-content {
font-style : italic;
font-size : 20px;
background-color : grey;
color : red;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<p> Paragraph 7 </p>
<p> Paragraph 8 </p>
<p> Paragraph 9 </p>
</div>
</div>
</body>
</html>
이렇게 하면 content 부분을 여러분이 원하시는 대로 customize 하실 수 있습니다.