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:05] mrkayhyun |
</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