한길(One Way)

■ Data Skill ■/jQuery Mobile

[jQuery 모바일] 안녕, 제이쿼리 모바일 (Hello, jQuery Mobile)

한길(One Way) 2023. 2. 11.

모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.  

jQuery Mobile을 주제로 Hello World를 시작으로 단계별로 진행해 보려고 한다. HTML과 CSS, JavaScript 그리고 jQuery는 사전에 학습하여 이미 알고 있다고 가정한다. jQuery Mobile 프레임워크를 적용하려면 먼저 HTML 페이지를 작성한다. 그리고 HTML 파일 <head> 태그에 아래의 코드를 넣어준다.

 

<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css" />

<script type="text/javascript" src="jquery-1.11.2.js"></script> 

<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>

 

 

JavaScript와 CSS 파일은 아래의 주소에서 파일을 다운로드할 수 있다.

http://jquery.com/download/

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

http://jquerymobile.com/download/

 

Download | jQuery Mobile

Download Download Builder We recommend using our tool to build a custom bundle that contains only the components you need. The builder generates a custom JavaScript file, as well as full and structure-only stylesheets for production use. Download Builder L

jquerymobile.com

 

 

필요한 파일은 총 3개인데 jQuery 파일과 jQuery Mobile CSS 파일과 jQuery Mobile JavaScript 파일이다. 파일의 순서는 먼저 jQuery Mobile CSS 파일을 두고 jQuery JS파일 그리고 jQuery Mobile JS파일로 한다.

 

 

참고로 작성하는 시점의 최신 버전은 아래와 같다.

  • jQuery 버전 1.11.2 
  • jQuery Mobile 버전 1.4.5 

 

파일을 다운로드 받아서 하는 방법도 있도 CDN(Content Delivery Network)을 사용하는 방법도 있다. CDN(Content Delivery Network)을 사용하려면 아래와 같이 직접 참조할 수 있다.

 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>

 

 

data-role 속성을 잘 기억해 두자.  

jQuery Mobile에서 사용하는 속성이다.

  • data-role="page"
  • data-role="header"
  • data-role="content"
  • data-role="footer"

예제의 전체 코드이다. 

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
 
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Header</h1>
        </div>
 
        <div data-role="content">   
            <p>Hello jQuery Mobile</p>       
        </div>
        <div data-role="footer">
            <h2>Footer</h2>
        </div>
    </div>   
</body>
</html>

jqm_00.html
0.00MB

결과화면 

 

div 태그에 data-theme 속성을 주면 테마를 설정할 수 있다.

이전 버전에는 테마가 a, b, c, d, e 다섯 개 있었는데 1.4.5 버전에는 a, b, c 가 정의되어 있다.

 

 

아래와 같이 data-role="page" 태그에 data-theme 속성으로 테마를 설정한다.

<body>

    <div data-role="page" data-theme="a">  

        <div data-role="header">

 

 

테마 A (기본)


 

 

테마 B



 

테마 C

이전 버전에는 테마가 다양하게 있었는데 상당히 심플해졌네요.

 

 jQuery Mobile에서 알아둘 속성

data-role="page | header | content | footer"
data-theme="a | b | c | ..."

 

728x90
저작자표시 비영리

'■ Data Skill ■ > jQuery Mobile' 카테고리의 다른 글

[jQuery 모바일] 버튼을 그룹으로 묶어보자  (0) 2023.02.11
[jQuery 모바일] 다양한 모양의 버튼을 만들어보자  (0) 2023.02.11
[jQuery 모바일] 다이얼로그 화면으로 팝업  (0) 2023.02.11
[jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동  (0) 2023.02.11
[jQuery 모바일] 페이지를 추가하고 페이지를 이동해 보자  (0) 2023.02.11

댓글

티스토리툴바