사용자 도구

사이트 도구


study:php:jquery_mobile_page의_기본적_구조

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판
이전 판
마지막 판 양쪽 다음 판
study:php:jquery_mobile_page의_기본적_구조 [2011/08/11 11:31]
mrkayhyun
study:php:jquery_mobile_page의_기본적_구조 [2011/08/11 14:06]
mrkayhyun
줄 28: 줄 28:
 </div> </div>
 </body> </body>
-  </code>+</code> 
 +   
 +<code php> 
 +<body>  
 +<div data-role="page" id="foo"> 
 + <div data-role="header"> 
 + <h1>Foo</h1> 
 + </div> 
 + <div data-role="content">  
 + <p>I'm first in the source order so I'm shown as the page.</p>  
 + <p>View internal page called <a href="#bar">bar</a></p>  
 + </div> 
 + <div data-role="footer"> 
 + <h4>Page Footer</h4> 
 + </div> 
 +</div> 
 +<div data-role="page" id="bar"> 
 + <div data-role="header"> 
 + <h1>Bar</h1> 
 + </div> 
 + <div data-role="content">  
 + <p>I'm first in the source order so I'm shown as the page.</p>  
 + <p><a href="#foo">Back to foo</a></p>  
 + </div> 
 + <div data-role="footer"> 
 + <h4>Page Footer</h4> 
 + </div> 
 +</div> 
 +</body> 
 +</code> 
   * <meta name="viewport" content="width=device-width, initial-scale=1"> : 구성된 ui와 widget들이 해당 모바일 기기의 가로와 세로 폭에 맞게 확대 또는 축소될수 있게 해주는 메타 태그이다.   * <meta name="viewport" content="width=device-width, initial-scale=1"> : 구성된 ui와 widget들이 해당 모바일 기기의 가로와 세로 폭에 맞게 확대 또는 축소될수 있게 해주는 메타 태그이다.
   * 기본적인 페이지의 구성은 <div>를 통해서 묶어 준다. 또한 jquery mobile 프레임워크를 사용하기 위해서 data-role속성을 사용한다. 기본적으로는 data-role이 page인 <div>태그 안에 헤더 <div>, 콘텐츠 <div>, 푸터 <div>를 작성하여 페이지를 구성한다.    * 기본적인 페이지의 구성은 <div>를 통해서 묶어 준다. 또한 jquery mobile 프레임워크를 사용하기 위해서 data-role속성을 사용한다. 기본적으로는 data-role이 page인 <div>태그 안에 헤더 <div>, 콘텐츠 <div>, 푸터 <div>를 작성하여 페이지를 구성한다. 
study/php/jquery_mobile_page의_기본적_구조.txt · 마지막으로 수정됨: 2011/08/11 14:07 저자 mrkayhyun