[송규남의 IT 다이어리] 제이쿼리(jQuery) 열다섯번째 이야기

정유리

2017-01-19 11:44:49

[제이쿼리 모바일(jQuery Mobile) 웹 페이지 만들기]

안녕하세요?

중앙HTA 강사 송규남입니다.

이번 시간에는 jQuery Mobile(제이쿼리 모바일)에 대해서 알아보겠습니다.

우리가 스마트폰으로 인터넷사이트에 접속하면 화면이 데스크 탑보다 작기 때문에 보기가 힘든 부분이 있거나 마우스로

클릭하면 어렵지 않지만 손가락으로 터치해서 선택하려면 radio button이나 checkbox같은 경우 힘들 수 있습니다.

jQuery(제이쿼리)에서는 모바일 웹 페이지를 만들기 위한 여러 가지 좋은 기능들을 담고 있는

자바스크립트(javascript) 라이브러리 입니다. jQuery(제이쿼리)사이트로 가서 라이브러리를 다운받습니다.

먼저 jquery.js파일은 존재해야 하고 http://jquerymobile.com/ 사이트로 접속하여 하고 jquery-mobile.js파일을 추가로

받습니다.

http://jquerymobile.com 사이트에서 위 그림의 화살표에 해당하는 버튼을 클릭하여 파일을 다운로드 받아

압축을 풉니다.

압축 푼 폴더에 jquery.mobile-1.4.5.min.js 파일과 폴더에 jquery.mobile-1.4.5.min.css 파일을 이용하여

jQuery Mobile(제이쿼리 모바일)페이지를 만들 수 있습니다.

예제를 만들기 위한 샘플(sample) 이란 이름의 폴더를 하나 만들고 샘플(sample)폴더 안에

css폴더와 js폴더를 만듭니다.

css폴더에 jquery.mobile-1.4.5.min.css 파일을 넣고 압축 푼 폴더에 있는 이미지(images)파일도

css폴더 안에 넣습니다.

js폴더에는 jquery.mobile-1.4.5.min.js파일과 jquery.js파일을 넣습니다.

디렉토리 구조는 아래와 같습니다.

jQuery mobile(제이쿼리 모바일)페이지를 만들기 위한 기본 형태는 아래와 같습니다.

---------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

...content goes here...

</body>

</html>

---------------------------------------------------------

우리는 관련 파일을 직접 다운로드 받았으니 아래와 같은 형태의 HTML파일을 작성 후 샘플(sample)폴더 안에 넣습니다.

---------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</script>

</head>

<body>

</body>

</html>

---------------------------------------------------------

==> jQuery Mobile을 위한 css파일과 js파일을 포함해 줍니다.

※주의할건 js파일을 포함할 때 jquery-1.12.4.js 파일이 jquery.mobile-1.4.5.min.js파일보다 먼저 포함해 줘야합니다.

jQuery(제이쿼리) 사이트에 모바일 관련된 데모예제 코드들이 많이 있습니다.

예제코드들을 따라 해보면 쉽게 모바일 페이지를 만들 수 있습니다.

http://jquery.mobile.com/demos 사이트에서 예제들을 살펴봅니다.

jQuery Mobile(제이쿼리 모바일)에서 기본단위는 페이지(page)입니다.

하나의 HTML파일안에 여러 개의 페이지(page)를 만들어 줄 수 있으며 이때 data-role이라는 속성을 사용합니다.

아래와 같이 하나의 페이지(page)는 header영역, content영역, footer영역을 가질 수 있습니다.

---------------------------------------------------------

<h1>Page Title</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer</h4>

</div>

</div>

---------------------------------------------------------

그럼 위의 코드를 HTML파일에 넣어 볼까요?

---------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</script>

</head>

<body>

<h1>Page Title</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer</h4>

</div>

</div>

</body>

</html>

---------------------------------------------------------

웹 브라우저로 열어보면 아래와 같은 화면이 나오네요.

아래처럼 하나의 HTML파일에 여러 개의 페이지(page)구성도 가능합니다.

---------------------------------------------------------

<div data-role="page" id="foo">

</div>

<p>I'm first in the source order so I'm shown as the page.</p>

<p>View internal page called <a href="#bar">bar</a></p>

</div>

<h4>Page Footer</h4>

</div>

</div>

---------------------------------------------------------

<div data-role="page" id="bar">

</div>

<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>

</div>

<h4>Page Footer</h4>

</div>

</div>

</body>

---------------------------------------------------------

웹브라우저로 실행을 시켜보면 아래와 같은 화면이 나옵니다. 두 개의 페이지(page)가 모두 보이는 것이 아니라

첫 번째 페이지만 화면에 보이게 됩니다.

Bar라는 문자를 누르면 <div data-role="page" id="bar"> 영역이 페이지형태로 보이게 됩니다.

위와 같이 하나의 HTML페이지에 여러 개의 페이지(page)를 구성하고 페이지이동은 아래처럼 a 태그의 href속성에

page의 id속성을 링크해주면 됩니다.

---------------------------------------------------------

<p>View internal page called <a href="#bar">bar</a></p>

...

<div data-role="page" id="bar">

...

---------------------------------------------------------

이번 강좌에서는 jQuery Mobile(제이쿼리 모바일)을 하기 위한 기본 page작성 방법 에 대해서 알아보았습니다.

다음 시간에는 모바일 웹에서 사용하기 위한 여러 UI관련 기능들 을 알아보도록 하겠습니다.

이전글[송규남의 IT 다이어리] 제이쿼리(jQuery) 열여섯번째 이야기 2017.04.03
다음글[송규남의 IT 다이어리] 제이쿼리(jQuery) 열네번째 이야기2016.10.27

A Column