jQuery Mobile‎ > ‎01. 페이지‎ > ‎

02. 이제, 페이지를 만들어 보자


한 번에 화면에 보여질 내용을 페이지에 담아야 한다. 페이지는 <body> 요소의 내부에 정의되는데 각각의 페이지에 해당하는 요소(주로, <div>)의 속성에 data-role="page"를 추가해서 지정한다. 다음 예에서는, HTML5의 요소를 활용할 것이므로 <section>을 사용하도록 하겠다.

<section data-role="page">
    
</section>

페이지의 내부에는 유효한 HTML 요소들이 올 수 있지만, 일반적으로 헤더, 컨텐트, 푸터가 페이지의 자식으로 사용된다. 각각의 영역은 data-role 속성값에 header, content, footer를 지정한다. 아래 예에서는, <div>를 사용해도 되지만, 각각 <header>, <article>, <footer>를 사용했다.

<section data-role="page">
    <header data-role="header">...</header>
    <article data-role="content">...</article>
    <footer data-role="footer">...</footer>
</section>

그러면, 기본적인 시작 템플릿은 다음과 같이 구성될 것이다.

<!DOCTYPE html>
<html>
<head>
    <title>
기본 틀</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<
section data-role="page">
    <header data-role="header">
        <h1>
머릿말은 여기에</h1>
    </header><!-- /header -->
    <article data-role="content">
        <p>
여기에 페이지의 내용을 적는다.</p>
    </article><!-- /content -->
    <footer data-role="footer">
        <h4>
꼬릿말은 여기에</h4>
    </footer><!-- /footer -->
</section><!-- /page -->
</body>
</html>

Comments