기본 틀 만들기 - 모바일 환경을 위한 준비
jQuery Mobile로 제작하는 문서는 HTML5의 DOCTYPE으로부터 시작된다. 모든 HTML 문서와 마찬가지로 최상위 요소인 <html> 요소는 하나의 <head> 요소와 하나의 <body> 요소를 자식 요소로 가지고 있다.
<head> 요소 내에는 jQuery Mobile을 사용하기 위해 필요한 라이브러리의 위치를 명시해 주어야 한다. jQuery Mobile을 사용하기 위해서는 CSS와 jQuery 및 jQuery Mobile의 자바스크립트 라이브러리를 참조하는 3줄의 내용이 포함되어 있어야 한다.
라이브러리는 각 버전별로 2개의 파일이 제공되는데, 하나는 파일명의 마지막 부분에 ‘min’이 붙어있고 다른 하나는 그렇지 않다. (라이브러리 자체를 디버깅할 것이 아니라면,) 라이브러리를 링크할 때에는 ‘min’이 붙은 파일을 사용하는 것이 바람직하다. min이 붙은 것은 트래픽 용량을 줄이기 위해 파일 크기를 최소화한 것이고, 그렇지 않은 것은 디버깅이 용이하도록 띄어쓰기나 줄바꿈들이 그대로 유지되어 있다. 아래의 예에서와 같이 CDN 주소를 사용할 수도 있고, 자신의 웹서버에 올려 놓고 직접 호스팅할 수도 있다.
jQuery Mobile 사이트에서 최신 라이브러리의 주소를 확인하거나 다운 받을 수도 있다. 이 글을 작성하는 시점의 버전은 1.0이다.
또한, 모바일 장치의 화면 크기를 고려해서 적절한 <meta> 태그도 추가해보자. 아래 예에서는 모바일 뷰포트를 지정하는 메타태그와 인코딩을 지정하는 메타태그를 추가해 보았다.
<!DOCTYPE
html>
<html>
<head>
<title>문서
제목</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"
/><script
type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
type="text/javascript"
src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></head>
<body>
...여기에는
문서의
내용이 입력될 것임...
</body>
</html>
뷰포트(viewport) 메타 태그에 관한 상세한 내용은 다음의 주소를 통해 확인할 수 있다.
