"JQuery모바일 section, header, footer"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

jQuery Mobile section, header, footer
jQuery 모바일 section, header, footer
jQuery모바일 섹션구조

1 주요 코드[ | ]

html

Copy

<section id='page1' data-role='page'>
  <header data-role='header'><h1>제목</h1></header>
  <div class='content'>
    <p>첫번째 페이지</p>
  </div>
  <footer data-role='footer'><h1>jmnote</h1></footer>
</section>

2 예시[ | ]

html

Copy

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
  <title>섹션 예제</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
  <section id='page1' data-role='page'>
    <header data-role='header'><h1>제목</h1></header>
    <div class='content'>
      <p>첫번째 페이지</p>
    </div>
    <footer data-role='footer'><h1>jmnote</h1></footer>
  </section>
</body>

예제: http://zetawiki.com/ex/jquery-mobile/jqm_sectioning.php

3 같이 보기[ | ]

@@ 5번째 줄: / 5번째 줄: @@
 ==주요 코드==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <section id='page1' data-role='page'>
    <header data-role='header'><h1>제목</h1></header>
@@ 13번째 줄: / 13번째 줄: @@
    <footer data-role='footer'><h1>jmnote</h1></footer>
 </section>
-</source>
+</syntaxhighlight>
 ==예시==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <!DOCTYPE html>
 <meta charset="utf-8" />
@@ 34번째 줄: / 34번째 줄: @@
    </section>
 </body>
-</source>
+</syntaxhighlight>
 *예제: http://zetawiki.com/ex/jquery-mobile/jqm_sectioning.php