Jquery Mobile

안녕하세요. 명월입니다.
이번 시간에는 저번 Jquery-UI에 이어 Jquery-Mobile에 대해서 알아보도록 하겠습니다.
우리가 web을 작성하고 각자 핸드폰으로 접속을 해보면 우리가 늘 보던 모바일 스타일의 웹 문서가 아닌, 글씨가 매우 작은 형식의 웹문서로 보이겠습니다.
이는 모바일의 해상도 문제인데 스마트폰의 크기는 작지만 해상도가 PC모니터와 비교해서 떨어지지가 않고 높은 퀄리티의 화면이기 때문에 브라우저는 저 해상도로 인식하지 않고 문서를 보여주기 때문에 글자 크기가 매우 작게 보여지는 현상이 나타나는 것 입니다.

그래서 우리는 각 웹 문서를 모바일에 맞게 크기를 설정해 주어야 하는데, 모든 문서를 설정해서 사용해야 합니다. 그런데 Jquery 라이브러리 중에서는 이 모바일 전용의 API가 있는데 그 것이 Jquery-mobile입니다. 우리는 제공되는 라이브러리를 가져다가 쓰면 조금은 쉽게 모바일 전용 웹 문서를 만들 수 있겠습니다.

먼저 아래의 경로로 사이트에 접속해 보도록 하겠습니다.

Jquery Mobile - 링크

모바일 사이트에 접속을 하였으면,먼저 Demos탭에 들어가서 어떠한 기능이 있는지 살펴보겠습니다.

Demos탭에 들어가 보면 여러가지 기능의 메뉴가 보입니다. 그 중 먼저 Page탭을 살펴 보도록 하겠습니다. Page 탭에서는 기본적으로 Jquery-Mobile를 html에서 설정하는 방법에 대해 소개를 하고 있습니다.

영어가 자신 있는 분은 한 번은 읽어 보시고 영어가 힘드신 분은 구글 번역기를 통해서 간략하게 의미 정도라도 확인을 해보세요

위 예제는 textBox에 대한 예제입니다.
위 예제를 확인 해 보시면 현재 PC로 작업 중 이여서 각 textBox의 차이가 확인이 되지 않습니다. 그러나 실제 모바일에서 작동을 하게 되면 각 옵션마다 나오는 키보드의 종류가 다르게 표시되겠습니다.
여기까지 Doc에 대한 설명이였고 실제 html 적용하는 방법에 대해서 알아보도록 하겠습니다.

다시 다운로드 탭으로 돌아와서 Jquery-Mobile 라이브러리를 다운받도록 하겠습니다.

라이브러리가 다운이 완료 되면 위와 같이 lib의 폴더 밑에 복사를 하겠습니다.

그리고 방금 전에 Demo로 확인 하였던 textbox를 종류별로 입력해서 확인해 보겠습니다.

역시 pc에서 확인하면 앞에 아이콘 정도만 뜨고 큰 차이를 느끼지를 못하겠습니다.
모바일로 직접 아파치에 접속을 하여서 결과를 확인 해 보겠습니다.

확실히 모바일로 접속을 하니 각 textbox마다 나오는 자판이 다르다는 걸 확인 할 수 있습니다.
그 외에도 다양한 위젯과 컨트롤이 있으니 각자 예제를 살펴 보면서 적용해 보세요.

여기까지 입니다.