* JQuery Mobile 로 스마트폰 UI를 시작하자
http://jquerymobile.com/download/
파일을 다운로드 혹은 CDN (Contents Delivery Network) 방식으로 설정합니다.
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
이 방법의 장점은 한번 파일이 전송되면 스마트폰 단말기에 캐시되어 남아 있게 됩니다. 따라서 내 파일이 접속하지 않아도 다른 앱에서 사용했다면 그만큼 속도가 더 빨라질 수 있습니다. 또한 버전이 업드레이드 되면 내 파일도 자동으로 바뀌므로 신경 쓰지 않아도 됩니다. 아무랫도 자신이 운영하는 서버의 트래픽을 줄이면서 JQuery Mobile이 직접 운영하는 성는 좋은 서버를 이용하는 것이 더 좋겠지요?
뷰포트 설정하기
스마트폰이나 태블릿 PC 등으로 접속하면 화면 크기가 모두 달라집니다. 따라서 뷰포트를 디바이스의 가로 크기에 맞춰서 설정해 주어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
만약 위의 뷰포트 크기를 설정하지 않으면 약 900 픽셀 크기에 맞춰서 풀 브라우징 되어 나타나므로 깨알 같은 글자로 첫 화면이 뜨게 됩니다. 위 설정은 사용자가 줌인/줌아웃 하는 것을 막지는 않았습니다. 왜냐하면 글자가 안 보여서 더 확대할 필요가 있는 사용자가 있기 때문입니다. 만약 다근 정책이 필요하다면 알맞게 설정하도록 하세요.
페이지만들기
이제 페이지를 설정해 줍니다. 페이지를 구성하는 방법은 아주 간단합니다. <body> 태그 안에 <div> 태그로 그룹을 만들어 주고 data-role 특성에 “page” 라고 지정하면 됩니다.
<div data-role="page">
</div>
페이지 안에는 일반적으로 header, content, footer 영역이 있기 마련입니다. JQuery Mobile은 아예 그 영역을 고정시켰습니다. 다음처럼 <div> 태그를 3개 만들고 data-role 특성에 각각 header, content, footer 라고 지정하면 됩니다.
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
실습하기
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page Structure</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header입니다.</h1>
</div>
<div data-role="content">
<p>Contents 입니다.</p>
</div>
<div data-role="footer">
<h2>Footer입니다.</h2>
</div>
</div>
</body>
</html>
>>> 결과
http://braverokmc2.dothome.co.kr/junho/ex09/hello.html
* 화면을 구성을 위한 UI 작성하기
● 한 페이지 안에 모두 구성하기
앞에서 살펴보았듯이 <div> 태그 안에 data-role 특성을 ‘page’ 로 설정하면 페이지가 완성 됩니다. 이때 id 선택자로 고유한 화면의 이름을 지정해 주면 이것을 화면 간의 이동 시 링크로 사용하는 방법입니다. 예를 들어 id=’main’ 이라고 만든 페이지가 있다고 하겠습니다. 만약 다른 화면에서 이 페이지로 이동하고 싶다면 <a> 태그의 특성에 href=“#main” 이라고 적어주면 됩니다. 그러면 JQuery Mobile은 이동에 필요한 화면 처리와 장면 전환 효과 등 여러 가지 작업을 자동으로 처리해 줍니다.
다음 예는 두 개의 화면을 한 페이지 안에 구성한 경우입니다. 이 때 첫 <div data-role=“page” > 부분만 화면에 나타나고 나머지 페이지는 표시되지 않습니다.
<div data-role="page" id="main_page">
<div data-role="header" data-theme="b">
<h1>메인페이지</h1>
</div>
<div data-role="content" >
<h2>메인페이지입니다.</h2>
<p><a href="#sub_page" data-transition="slide">서브페이지</a> </p>
</div>
<div data-role="footer" >
<h2>Footer입니다.</h2>
</div>
</div>
<div data-role="page" id="sub_page">
<div data-role="header" data-theme="b">
<h1>서브페이지</h1>
</div>
<div data-role="content">
<h2>서브페이지 입니다.</h2>
<p><a href="#main_page" data-direction="reverse" data-transition="slide">메인페이지</a></p>
</div>
<div data-role="footer">
<h2>Footer입니다.</h2>
</div>
각각의 페이지는 서로 링크로 연결되어 있는데 다음처럼 href 특성에 북마크를 지정하듯 <a> 태그에 id 선택자의 이름을 적어주면 해당 화면으로 이동합니다.
<a href=“#sub” data-role=“button”> 서브페이지</a>
● data-theme
예를 들어서 헤더 부분을 검정색이 아닌 파랑색으로 바꾸고 싶다면 다음처럼 data-theme=“b” 라는 특성을 <div> 태그 안에 넣어주면 됩니다.
<div data-role=“header” data-theme=“b”>
http://demos.jquerymobile.com/1.4.5/button-markup/
위링크는 버튼의 경우
http://demos.jquerymobile.com/1.4.5/theme-default/
A: 검정색, B: 파랑색, C: 베이지색, D:회색, E: 노랑색
만약 jQuery Mobile 1.4.2 이상 버전을 사용한다면 두 개의 스타일만 사용할 수 있습니다.
A: 연한 회색, B: 검정색
< 장면 전환 효과 >
JQuery Mobile의 장점은 이동하는 페이지의 히스토리를 기억한다는 것입니다. 그래서 <a> 태그에 다음처럼 data-direction을 ‘reverse’ 로 지정하면 장면 전환 효과를 자동으로 처리해 줍니다. 그런데 JQuery Mobile 1.4.2 이상부터는 기본 장면전환 효과가 Fade 이기 때문에 좌우 이동 시 슬라이드 효과를 주기 위해서는 data-transition=“slide”을 꼭 입력해 주어야 합니다.
<a href="#sub_page" data-transition="slide">서브페이지</a>
<a href="#main_page" data-direction="reverse" data-transition="slide">메인페이지</a>
예를 들어 왼쪽에서 오른쪽으로 이동하는 효과였으면, 메인 페이지로 돌아갈 때 오른쪽에서 왼쪽으로 반대 방향을 자동으로 처리해 줍니다. 만약 이 값을 설정하지 않으면 그냥 왼쪽에서 오른쪽으로 장면 전환이 이루어집니다. 참고로 만약 <a> 태그의 href가 아닌 이전 주소로 되돌아가고 싶다면 data-direction=“reverse” 대신에 data-rel=“back”을 사용합니다. 두가지를 옵션을 동시에 사용할 수는 없으며 data-direction=“reverse” 는 장면 전환 효과만 적용되고, data-rel=“back” 는 장면 전환뿐만 아니라 브라우저의 뒤로가기 단추와 유사한 기능을 수행합니다.
<!DOCTYPE HTML>
<html>
<head>
<base href="http://demos.jquerymobile.com/1.4.5/datepicker/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script><script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
</head>
<body>
<div data-role="page" id="main_page">
<div data-role="header" data-theme="b">
<h1>메인페이지</h1>
</div>
<div data-role="content" >
<h2>메인페이지입니다.</h2>
<p>
<a href="#sub_page" data-transition="slide">서브페이지</a>
</p>
<input type="text" data-role="date" data-inline="true" value="04/10/2017">
</div>
<div data-role="footer" >
<h2>Footer입니다.</h2>
</div>
</div>
<div data-role="page" id="sub_page">
<div data-role="header" data-theme="b">
<h1>서브페이지</h1>
</div>
<div data-role="content">
<h2>서브페이지 입니다.</h2>
<p>
<a href="#main_page" data-direction="reverse" data-transition="slide">메인페이지</a>
</p>
</div>
<div data-role="footer">
<h2>Footer입니다.</h2>
</div>
</div>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex09/test1.html
< 여러 개의 페이지로 구성하기>
여러 개의 페이지로 구성할 때는 오히려 간단합니다. 각각의 페이지를 완성된 형태로 구성하고 링크 내용도 페이지의 파일 이름을 직접 쓰면 됩니다. 예를 들어 ‘main.html’ 과 ‘sub.html’ 의 두 개 파일을 만들었다고 가정하겠습니다.
그러면 main.html 파일에서 sub.html 로 이동하고 싶다면 다음처럼 링크를 작성하면 됩니다.
<a href=“sub.html” data-role=“button”>서브페이지 </a>
위 예를 보면 data-role=“button” 이 추가된 것을 알 수 있습니다. 이것은 링크를 단추
모양으로 바꿔주는 스타일입니다.
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>메인페이지</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>메인페이지</h1>
</div>
<div data-role="content" >
<h2>메인페이지 입니다.</h2>
<p><a href="sub.html" data-role="button">서브페이지</a></p>
</div>
<div data-role="footer" >
<h2>Footer입니다.</h2>
</div>
</div>
</body>
</html>
sub.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>서브페이지</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>서브페이지</h1>
</div>
<div data-role="content">
<h2>서브페이지 입니다.</h2>
<p><a href="main.html" data-direction="reverse" data-role="button">메인페이지</a></p>
</div>
<div data-role="footer">
<h2>Footer입니다.</h2>
</div>
</div>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex09/main.html
10강. 스마트폰 페이지 전환 효과 익히기
- 같은 내부 페이지
링크 연결시 상대 경로로 지정하면 원하는 정상적인 장면 전환 효과를 활용할 수 있습니다.
이 방법은 <a> 태그에서 ‘href’ 의 특성을 부여할 때 상대 경로와 파일 이름을 지정하는 것입니다. 보통 작업할 때 많이 이용하기 때문에 익숙할 것입니다.
<a href=“sub.html” data-transition=“slide” >서브페이지 이동</a>
위 경우는 같은 폴더에 들어 있는 sub.html 파일로 링크를 연결하는 방법입니다. 그리고 data-transition=“slide”를 <a> 태그의 특성에 기입하면 다음처럼 왼쪽에서 오른쪽으로 ‘slide(슬라이드)’ 효과가 적용됩니다.
- 대화상자 열기
대화상자의 UI 가 필요하다면 data-rel=“dialog” 만 기입하세요
두 번째 방법은 앞의 방법과 동일하게 같은 도메인에 있는 파일을 상대경로로 지정해서 사용하지만 차이점은 화면 이동이 아니라 대화상자로 대상 페이지를 표현하는 것입니다. 웹 페이지의 팝업처럼 말이지요. 방법은 <a> 태그의 data-rel 특성값에 “dialog” 만 지정하면 됩니다. 그러면 링크가 연결된 페이지는 자동으로 대화상자의 모습으로 나타납니다.
<a href="sub.html" data-transition="slide">같은 내부 페이지</a>
위 경우는 같은 폴더에 들어 있는 sub.html 파일을 대화상자의 UI 로 바꿔서 띄우는 모습닙니다. 장면 전환 효과는 화면 가운데 지점부터 점점 확대되는 Pop(팝) 효과입니다. 마치 팝업과 비슷하지만 대화상자의 특징은[닫기] 단추가 있다는 것입니다.
- 외부 도메인 열기
외부 도메인의 URL을 지정하면 장면 전환 효과가 발생하지 않습니다.
도메인이란 인터넷에서 사용할 수 있는 자원의 구분된 영역을 말합니다. 여기서 외부 도메인의 의미는 현재 서버의 영역을 기준으로 바깥에 있는 다른 웹 서버를 의미합니다.
JQuery Mobile에서 외부 도메인의 URL을 지정하면 장면 전환 효과가가 발생하지 않습니다.
링크를 연결하다 보면 직접 제작하지 않은 다른 사이트로 링크를 지정할 경우도 있습니다. 이경우도 다음처럼 하면 됩니다.
<a href="http://www.google.com" data-transition="slide" > www.google.com</a>
이 경우는 구글 검색 페이지의 URL 주소를 직접 지정한 경우입니다. HTML 마크업에서 <a> 태그를 사용하기 위해서는 당연한 것입니다. 하지만 장면 전환 효과는 나타나지 않습니다. JQuery Mobile 이 외부 도메인의 페이지를 연결할 때는 더 이상 Ajax를 이용해 처리할 수 없기 때문입니다. Ajax란 자바스크립트와 xml 을 이용하여 동적인 페이지를 만들어주는 기술입니다. 아쉬운 부분이지만 현재 기술로는 어쩔 수 없는 상황이므로 외부 페이지 연결 시 꼭 유의하세요.
- 내부 도메인 파일을 외부 도메인으로 열기
별도의 자바스크립트 모듈을 사용할 때 혹시 충돌이 난다면 rel=“external”을 활용하세요.
외부 도메인의 URL을 직접 지정하지 않고 내부 페이지를 연결하더라도 고의적으로 Ajax의 사용을 중단시킬 수 있습니다. 다음처럼 <a> 태그의 “rel” 특성값에 “external”을 지정하면 됩니다. 이 방법을 사용하면 고의적으로 Ajax의 사용을 멈추게 하므로 장면 전환 효과가 나타나지 않습니다.
<a href="sub.html" rel="external" >rel="external" 사용</a>
위 예는 같은 폴더에 있는 sub.html 페이지를 연결할 때 강제로 외부 도메인처럼 연결하는 경우입니다. 그냥 내부 도메인으로 연결하지 않고 왜 이런 방법으로 마련했는지 궁금할 것입니다. 왜 JQuery Mobiel 의 핵심 자바스크립트 기능을 멈추는 장치를 스스로 만들었을 까요? 그 이유는 다른 자바스크립트 모듈을 사용할 경우 충돌할 가능성이 있기 때문입니다. JQuery Mobile 이 Ajax를 이용하므로 계속해서 페이지의 링크가 연결될 때마다 메모리에 페이지 정보를 담게 됩니다. 그런데 페이지 작업을 하다 보면 다른 오픈 소스의 자바스크립트 프로그램을 포함시켜 작업해야 할 경우가 발생하게 됩니다. 이때 별도로 포함시킨 모듈이 JQuery Mobile 의 프로그램과 충돌이 나서 동작하지 않을 수 있습니다. 그런 경우를 만나면
rel=“external”을 활용해 보세요.
실습
=> main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h1>다양한 링크 연습</h1>
</div>
<div data-role="content">
<ul data-role="listview" >
<li data-role="list-divider"> 내부 도메인</li>
<li><a href="sub.html" data-transition="slide">같은 내부 페이지</a></li>
<li><a href="sub.html" data-rel="dialog" >대화상자로 열기</a></li>
<li data-role="list-divider"> 외부 도메인</li>
<li><a href="http://www.google.com" data-transition="slide" > www.google.com</a></li>
<li><a href="sub.html" rel="external" data-transition="slide">rel="external" 사용</a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>Footer 입니다.</h4>
</div>
</div>
</body>
</html>
sub.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" >
<h1>서브 페이지</h1>
</div>
<div data-role="content">
<h1>다양한 페이지 링크 연습</h1>
<p>다양한 종류의 링크를 연결할 수 있습니다. </p>
<a href="#" data-role="button" data-rel="back" data-theme="b" >돌아가기</a>
</div>
<div data-role="footer" >
<h4>Footer 입니다.</h4>
</div>
</div>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex10/main.html
* data-role=“listview”
를 특성 값으로 지정하면 블릿이 모두 사라지고 JQuery Mobile에서 사용하는 리스트뷰 형식으로
디자인이 바뀝니다.
* data-role=“list-divider”
항목들 간의 중요한 주제 부분을 그룹을 묶어서 항목간에 분리하여 제목을 표시하고 싶다면 li 엘리
먼트에 data-role=“list-divider” 라고 기입하면 됩니다.
19강 - 9. Jquery Mobile UI 작업하기
20 강 - 10. 스마트폰 UI 기법 페이지 전환 효과 익히기
댓글 ( 4)
댓글 남기기