제이쿼리 모바일 시작하기 data-role 이란?

올해가가기전에 목표가 생겼습니다. 제이쿼리모바일로 웹앱을 구현하는게 목표인데요. 그에따라 공부하는 내용을 조금씩 블로그에 옮겨 담고 복습하는 차원에서 글을 적어볼까합니다.

 

2015/12/16 - [잡담] - 제이쿼리 모바일로 웹앱을 기획하고 있습니다.

 

그에 관련해서 위와 같은글을 적어 놓았네요.

 

 

우선 글을 읽으시기전에 HTML에 관해서 잘모르시는분들은 아래 글도 읽어보시기 바랍니다. 실력도 짧고 내용도 간단하지만 맛보기정도는 될거라 생각이 됩니다. 시간도 되고, 실력도 늘련 좀더 자세하게 다시 풀어서 쓸 계획입니다만 언제가 될지 잘 모르겠네요.

 

2015/10/17 - [HTML5/CSS3] - HTML이란 무엇일까? HTML태그 살펴보기

 

2015/12/09 - [퍼블리싱] - W3C 웹표준 DOCTYPE 선언하기

 

제이쿼리 모바일에 관해서 설명을 먼저 드려야 하는데 제이쿼리 모바일은 모바일 페이지를 쉽게 만들 수 있게 하는 프레임워크인데요. 반응형으로 미디어쿼리를 만들고 화면을 해상도에 따라서 고치고 아이콘을 배치하고.. 이런 작업들을 좀더 손쉽게 만들어 주는 편리한 기능들이 잔뜩 있습니다.

 

제이쿼리 모바일 선언문

 

제이쿼리 모바일을 사용하기 위해서는 선언부에 제이쿼리 모바일 선언문이 필요합니다.

 

 <link rel = "stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
 <script src="http://code.jquery.com/jquery-1.5.min.js" ></script>
 <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" ></script>

 

 

선언부에서는 css와 제이쿼리 플러그인, 제이쿼리 모바일 플러그인을 로드해주셔야 제대로 사용을 하실 수 있습니다.

 

 

 

 

 

제이쿼리 모바일 본문

이제는 바디태그안의 본문형식이 어떻게 들어가는지 살펴보실까요?

 <div data-role="page" id="mainPage">
  <div data-role="header">
   <h1>페이지</h1>
  </div>
  <div data-role="content">
   <h1>대제목</h1>
   <h2>소제목</h2>
   <p>내용</p>
  </div>
  <div data-role="footer" data-position="fixed">
   <h3>CopyRight</h3>
  </div>
 </div>

 

제이쿼리 모바일은 data-role 을 이용해서 속성을 지정해주는데요. 그 속성에는 page, header, content, foot 이렇게 화면을 구성하는 기본레이아웃을 지정해줄수가 있습니다.

 

 

 

화면이 너무 길어서 보기가 힘들지만 일부러 편집없이 올려보았습니다. 보시다시피 마지막 CopyRight가 화면 해상도에 맞춰서 제일 아래로 내려가있는걸 보실 수 있는데요. 보고있는 디바이스의 화면해상도에맞춰서 제일 아래로 내려가게 됩니다.

 

그역활을 하는게  data-position="fixed" 이구요. 화면크기를 줄이거나하면 스크롤바가 자동으로 생깁니다.

 

페이지를 만들기 위해 제일처음 <div data-role="page" id="mainPage"> 페이지를 만들었고 그안에 <div data-role="header">, <div data-role="content">, <div data-role="footer">의 속성이 들어갔습니다.

 

이렇게 레이아웃이 구성이 되면 기본페이지를 만들 수가 있습니다. 오늘은 기본페이지만들기까지 살펴보았습니다. 고생하셨어요!