html 기본구조

<div data-role="page">
   <div data-role="header"> <!--data-position="fixed"-->
      <h1>Hello</h1>
   </div>
   <div data-role="content" role="main" class="ui-content">
    Hello 제이쿼리 모바일
   </div>
   <div data-role="footer">
   <h4>시작하기</h4>
   </div>
</div>

 

제이쿼리 모바일은 기본적으로 태그명과 data-role 을 이용해 대부분 컴포넌트를 구분한다.

 

role 는
시각장애인분들이 사용하는 스크린리더기 또는 음성브라우저 등에서 웹사이트의 접근성을 높이기 위해 사용하는 속성으로 요소의 역할을 이해할 수 있게 설명해주는 속성이다

 data-position="fixed"

를 사용하면 화면 data-role="header" 의 경우는 상단에, data-role="footer"의 경우는 하단에 고정시킬 수 있다.