1.1 뷰포트 일반 웹 페이지의 모바일 실행 결과 뷰포트(viewport) 보여지는 창문이란 뜻으로 보통 '화면 요소가 보여지는 영역'을 말함 각 장치의 뷰포트 적용 방식에 따라 같은 HTML5 문서가 실행 장치에 따라 다르게 보임 레이아웃 뷰포트(layout viewport) 장치의 전체 화면 해상도에 해당하는 영역 현재 보여지는 브라우저 창의 크기와는 관련이 없음 비주얼 뷰포트(visual viewport) 전체 페이지 중에서 현재 화면에 보이는 영역 비주얼 뷰포트의 크기는 레이아웃 뷰포트보다 클 수는 없기 때문에 레이아웃 뷰포트의 크기 즉, 전체 화면의 해상도에 맞게 글자 크기를 표시함
1.뷰포트 p.129 모바일 환경의 뷰포트 스마트폰 모바일 브라우저 창의 크기가 화면 최대 크기로 고정 결과적으로 비주얼 뷰포트와 레이아웃 뷰포트 크기가 항상 같음 풀브라우징(full-browsing) 지원 : 작은 화면에 웹 페이지를 모두 표시하기 위해 전체적으로 배율 조정을 통해 축소 모바일 브라우저는 모바일에 최적화되지 않은 페이지도 모두 보일수 있도록 기본 뷰포트를 크게 설정한다. [표 4-1] 뷰포트 크기 문제점 각 스마트폰 브라우저 별로 실제보다 훨씬 큰 크기의 뷰포트가 설정되어 있고 이를 기준으로 글자 크기를 표시하므로 글자 크기가 작아짐 글자 크기를 두세 배 정도 더 확대시킬 필요가 있으며 뷰포트를 재설정해서 실제 화면의 크기와 뷰포트 크기를 일치시켜야 함 스마트폰(브라우저) 유형 뷰포트 기본 너비(width) 안드로이드폰(웹킷) 980px 아이폰(사파리) 타 모델(오페라) 850px 윈도폰(인터넷 익스플로러) 974px
1.2 뷰포트 메타 태그 모바일 페이지 작성시 <meta> 태그를 이용하여 뷰포트 정보를 제공 1.뷰포트 p.130 1.2 뷰포트 메타 태그 모바일 페이지 작성시 <meta> 태그를 이용하여 뷰포트 정보를 제공 <meta> 태그 : 브라우저에게 웹 페이지 관련 부가적인 정보를 제공하는 태그 화면 크기와 해상도가 다양하고 PC 화면과 비슷한 해상도로 표시되므로 인식하기 어려울 정도로 작은 글씨로 표시되는 문제점을 해결 [표 4-2] <meta> 태그의 뷰포트 속성 device-width나 device-height는 모바일 장치의 실제 화면 크기를 기준으로 뷰포트의 너비나 높이를 설정 보통 height 속성값은 width 속성값을 기준으로 자동 설정됨 뷰포트 속성 속성값 의미 width 예) 480px,720px, 980px, device-width 화면(뷰포트)의 너비(200px~10,000px) height 예) 800px, 1280px, device-height 화면(뷰포트)의 높이 initial-scale 예) 1.0 초기 화면 확대 비율(0~10.0) minimum-scale 예) 0.5 화면 축소 최소 비율(0~10.0) maximum-scale 예) 2.0 화면 확대 최대 비율(0~10.0) user-scalable 예) yes(기본값), no 사용자의 확대 혹은 축소 가능 여부
<meta> 태그를 이용한 뷰포트 선언의 예 1.뷰포트 p.130 <meta> 태그를 이용한 뷰포트 선언의 예 모바일 웹 페이지 작성시 <head> 태그 안에 <meta> 태그를 포함시킴 5장 이후 모든 HTML5 문서 안에 기본적으로 다음 뷰포트 메타 태그 선언을 포함 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no" /> <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
기본 뷰포트 메타 태그 적용 결과 기본 뷰포트 메타 태그를 지정함으로써 실제 모바일 장치의 해상도에 맞게 렌더링 1.뷰포트 p.132 기본 뷰포트 메타 태그 적용 결과 기본 뷰포트 메타 태그를 지정함으로써 실제 모바일 장치의 해상도에 맞게 렌더링 [그림 4-2] semantictag-layout-viewport.html의 실행 결과
1.2 프레임워크 연결 방식 CDN(콘텐츠 전송 네트워크; Contents Delivery Network) 방식 다운로드 방식 1.제이쿼리 모바일 개요 p.159 1.2 프레임워크 연결 방식 CDN(콘텐츠 전송 네트워크; Contents Delivery Network) 방식 파일을 직접 다운받지 않고 제이쿼리 모바일 서버의 URL 주소만을 마크업에 명세함으로써 프레임워크가 적용될 때 참조하는 방식 최신 버전이 가까운 서버에 저장되었다가 자동으로 참조됨 -> 업그레이드 부담이 없음 개발이 완료된 후 운영 단계에서 사용, 편의성, 성능 측면에서 유리 인터넷에 온라인 상태로 연결되어야 함 다운로드 방식 일반적인 방법 제이쿼리 모바일 공식 사이트에서 ‘Zip File: jquery.mobile-1.X.zip' 압축 파일을 직접 다운 받고 압축을 풀어 저장한 뒤 호출 보통 개발 단계에서 사용, 디버깅 등의 편의성 측면에서 유리
제이쿼리 모바일 연동 방식 CDN 방식 다운로드 방식 1.제이쿼리 모바일 개요 p.160 제이쿼리 모바일 연동 방식 CDN 방식 HTML5 문서의 <head> 엘리먼트 영역 안에 <link>와 <script> 태그의 속성으로 URL 주소를 추가 다운로드 방식 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> . . . 생략 . . . </body> </html> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jquery.mobile-1.0.min.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> . . . 생략 . . . </body> </html>
1.제이쿼리 모바일 개요 p.161 제이쿼리 모바일 연동 방식 CSS3 파일, 제이쿼리 스크립트 파일, 제이쿼리 모바일 스크립트 파일 순으로 HTML5 마크업에 포함되어야 함 1) jquery.mobile-1.0.min.css 제이쿼리 모바일에서 사용하는 CSS3 스타일 파일 기본 테마와 페이지 구조를 정의한 코드, 아이콘 관련 코드 등을 포함 2) jquery-1.6.4.min.js 제이쿼리 기본 클래스들을 정의하는 제이쿼리 라이브러리 파일 모든 기능의 엔진 역할을 하는 제이쿼리 모바일의 핵심 제이쿼리 모바일이 내부적으로 제이쿼리에 기반을 두고 자바스크립트로 작성되었기에 관련 코드를 포함해야 함 3) jquery.mobile-1.0.min.js 제이쿼리 모바일 자바스크립트 라이브러리 제이쿼리 모바일의 기본 클래스들을 정의하는 자바스크립트 코드를 포함
1.3 프레임워크 기본 구성 형식 모바일 페이지 제이쿼리 모바일 페이지 구조 1.제이쿼리 모바일 개요 p.161 1.3 프레임워크 기본 구성 형식 모바일 페이지 모바일 장치에 보여지는 하나의 화면, 모바일 앱의 기본 구성 요소 제이쿼리 모바일 페이지 구조 페이지 : 브라우저에 보여지는 전체 화면 영역(data-role="page") 헤더, 콘텐츠, 푸터를 포함하는 컨테이너 역할 헤더 : 페이지 상단의 툴바 영역(data-role="header") 콘텐츠 : 페이지 중앙의 실제 페이지 내용이 표시되는 영역(data-role="content") 푸터 : 페이지 하단의 툴바 영역(data-role="footer")
페이지 템플릿 생성하기 1.제이쿼리 모바일 개요 p.162 [예제5-1] 단일 페이지 템플릿 생성하기 /ch05/single-page.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>머리말(header)영역</h1> </div> <div data-role="content"> <p>내용(content)영역</p> <div data-role="footer"> <h4>꼬리말(footer)영역</h4> </body> </html> 페이지 컨테이너
2.1 웹앱 화면 구성 모바일 페이지 구성 유형 단일 페이지 템플릿(single-page template) HTML5 문서 안에 오직 하나의 페이지를 정의 다중 페이지 템플릿(multi-page template) HTML5 파일 안에 둘 이상의 페이지를 정의 웹 브라우저는 HTML5 파일 안의 첫 번째 페이지를 첫 화면으로 보여줌 나머지 페이지는 숨겨져 있다가 페이지 링크를 통해 화면이 전환되면서 표시 브라우저는 처음 HTML5 파일을 읽을 때 DOM 트리 안에 모든 페이지를 저장해 놓고 페이지 이동을 통해 화면에 하나씩 번갈아 표시
2.2 페이지 연결 방식 내부 페이지 연결 외부 페이지 연결 2.화면 구성 및 페이지 연결 p.166 2.2 페이지 연결 방식 내부 페이지 연결 하나의 HTML5 파일 안에 여러 페이지를 명세하여 서로 연결하는 방법 다중 페이지 템플릿을 적용하는 형태로 각 내부 페이지들은 Ajax를 통해 내부 링크 방식으로 연결됨 같은 HTML5 파일 안에 함께 정의된 페이지들은 항상 내부 페이지 연결 방식을 취함 연결 방식은 내부(도메인) 링크 방식에 속함 외부 페이지 연결 여러 HTML5 파일 안에 페이지들을 나누어 명세하고 서로 연결하는 방법 각 HTML5 파일들은 단일 페이지 템플릿 또는 복수 페이지 템플릿을 적용 서로 다른 HTML5 파일 안의 외부 페이지들은 내부 링크 또는 외부 링크 방식으로 연결