IT/Web Dev | Posted by 철규님(최규철) 2011.05.10 19:57

[jQuery Mobile] 2. Getting started - Hello world

이 글은 jQuery Mobile 공식 홈페이지(http://jquerymobile.com/)의 Docs and Demos를 기반으로 작성되었습니다.
작성일(2011/05/10) 기준 jQuery Mobile의 최종 버전은 jQuery Mobile 1.0 Alpha 4.1입니다.

2. Getting started - Hello world
< jQuery Mobile로 Web application 만들기 >
Written by Gyucheol Choi on 10 MAY 2011
모든 언어를 처음 접할때 작성하는 프로그램은 아마 "Hello world!"를 출력하는 프로그램일 것입니다. 물론 안드로이드 개발에 있어서는 프로젝트 생성 윈도우에서 next 버튼만 클릭하면 hello world를 출력하는 프로젝트를 생성해줘서, 새로운 언어로 새로운 환경에서 hello world를 띄워보는 흥미를 없애버리긴 했지만요. 이번 글에서는 jQuery Mobile을 설치(?)하고 Hello world를 출력하는 어플리케이션을 만들어볼려고 합니다.
jQuery Mobile 사용 하기
jQuery Mobile을 사용하는 방법은 두 가지가 있습니다. CDN(Content Delivery Network)에서 제공하는 자바스크립트(.js) 파일과 CSS(.css) 파일을 사용하는 방법이 있고, 소스 및 이미지를 다운로드 받아서 자신의 호스트 서버에 업로드 한 후 이 버전을 참고하는 방법이 있습니다. 각자의 호불호에 따라서 사용을 하시면 될 듯합니다. 제공되는 버전을 보면 Uncompressed 버전과 Minified 버전이 있는데, Minified 버전은 불필요한 개행이나 공백, 주석 등을 완전히 제거한 버전이고, Uncompressed 버전은 개행, 공백, 주석 등을 온전히 유지하여 디버깅을 가능하게 한 버전입니다. 때문에 실제 파일 크기를 보면 자바스크립트의 경우 130KB/19KB, CSS 파일의 경우 53KB/7KB 등으로 많은 차이가 나는 것을 알 수 있습니다. 실제적인 jQuery Mobile의 내부 구조를 살펴보시고 싶은 분은 Uncompressed 버전을 사용하시면 많은 도움이 될 것 같습니다.
이 글에서는 CDN에서 제공하는 Minified 버전의 자바스크립트 파일과 CSS 파일을 사용하는 방법을 알아보겠습니다.

jQuery Mobile을 사용하기 위해서는 CSS 파일과 jQuery Core 자바스크립트 파일, jQuery Mobile 자바스크립트 파일이 필요합니다. jQuery Mobiel 다운로드 사이트(http://jquerymobile.com/download/)를 참고해서, 'Copy-and-Paste Snippet'의 태그를 웹 페이지에 추가합니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>헤더 타이틀</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 11 </body>

해당 HTML 파일이 HTML5를 기반으로 한 문서라는 것을 1번 라인에 명시하였습니다. 그리고 5, 6, 7번 라인에서 jQuery Mobile을 위한 CSS 파일, 자바스크립트 파일을 포함시킵니다. 이로써 jQuery Mobile에서 제공하는 모든 기능을 사용할 준비가 완료되었습니다. 이제 Hello world를 띄워보는 어플리케이션(이라고 하기도 뭐한 어떤 것)을 만들어 보겠습니다.
Hello world
jQuery Mobile에서는 화면의 구성 요소들을 div 태그로 구분을 하고 div 태그의 data-role 속성(attribute)을 명시함으로써 화면에서 어떤 역할을 할지 지정합니다. 이후는 jQuery Mobile 프레임워크가 모든 걸 알아서 합니다. 자세한 페이지 구조는 다음 글에서 설명을 하기로 하고 우선은 간단한 구조만 정의하고 예제를 볼까 합니다.

jQuery Mobile 프레임워크는 1개 이상의 page를 가지고, 하나의 page는 header, content, footer를 각각 가집니다. 예제로 작성할 Hello world 어플리케이션에서는 Header 부분에 "First App", Content 부분에 "Hello world!", footer 부분에 "jQuery Mobile"을 각각 나타내보겠습니다. 위의 설명대로 구성한 소스코드는 아래와 같습니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery Mobile Test</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 <div data-role="page"> 11 <div data-role="header"> 12 <h1>First App</h1> 13 </div> 14 15 <div data-role="content"> 16 <p>Hello World!</p> 17 </div> 18 <div data-role="footer"> 19 <h2>jQuery Mobile</h2> 20 </div> 21 </div> 22 </body>

위의 파일을 저장하고 원하는 브라우저에서 열어보면 아래와 같은 화면을 볼 수 있습니다.


Hello world - Theme
jQuery Mobile은 기본적으로 5가지 형태의 테마를 제공합니다. div 태그에 data-theme 속성에 값을 부여함으로써 각각의 테마를 적용할 수 있습니다. 테마는 특별한 id 없이 a, b, c, d, e의 값을 가집니다. 명시하지 않을 경우 a의 테마가 적용됩니다.

테마 page 단위로 일괄적으로 적용할 수도 있으며, 필요에 따라 화면의 각 구성 요소에 서로 다른 테마를 적용할 수도 있습니다.




이로써 jQuery Mobile을 내 웹 어플리케이션에 적용하고, 이를 이용해서 Hello World를 출력하는 프로그램, 그리고 그 프로그램에 테마를 적용하는 것까지 해보았습니다. 간단한 예제지만 분석해볼만한 내용은 더 많은 것이라 생각됩니다. 지금은 잘 이해되지 않는 부분도 나중에 다시 한번 보신다면 더 잘 이해하고 더 많은 의미를 찾아낼 수 있지 않을까 생각합니다.

댓글을 달아 주세요



티스토리 툴바