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

03. 하나의 문서에 여러 개의 페이지를...


하나의 HTML 문서에 여러 개의 페이지를 둘 수 있는데, 페이지는 한번에 하나씩 보여지며, 각각의 페이지는 고유한 id 속성 값을 갖도록 해야한다. id 속성값은 해쉬(#)를 사용하는 내부 링크에 사용되며 기본적으로 Ajax를 사용해서 각 페이지를 불러들인다. 페이지를 별도의 파일로 구성하는 경우라면 굳이 id 속성을 지정할 필요는 없다. 여러 페이지로 구성된 문서를 로딩할 때에는 가장 먼저 기술된 페이지가 표시된다.

<body>
<!-- Start of first page -->
<
section data-role="page" id="start_page">
    <
header data-role="header">
        <h1>
시작 페이지</h1>
    </
header><!-- /header -->
    <article data-role="content">
        <p>
시작하면, 문서의 맨 앞에 있는 페이지가 표시됩니다.</p>
        <p>
이제, <a href="#second_page">다음 페이지</a>로 이동해볼까요?</p>
    </article><!-- /content -->
    <footer data-role="footer">
        <h4>
꼬릿말 영역입니다.</h4>
    </footer><!-- /footer -->
</
section><!-- /page -->

<!-- Start of second page -->
<
section data-role="page" id="second_page">
    <
header data-role="header">
        <h1>
둘째 페이지</h1>
    </
header><!-- /header -->
    <article data-role="content">
        <p>
두 번째 페이지입니다.</p>
        <p>
다시 <a href="#start_page">시작 페이지</a>로 돌아갑시다.</p>
    </article><!-- /content -->
    <footer data-role="footer">
        <h4>
꼬릿말 영역입니다.</h4>
    </footer><!-- /footer -->
</
section><!-- /page -->
</body>

Comments