CHAPTER 16. 모바일 웹페이지
모바일웹 vs 네이티브앱
모바일웹 vs 네이티브앱
데스크탑 웹과 모바일 웹 모바일 장치는 데스크탑에 비하여 화면의 크기가 작고 처리능력이 떨어진다. 모바일 웹 브라우저는 상당히 다양하다. 모바일 장치와 데스크탑은 사용자 인터페이스가 서로 다르다. 모바일 장치는 터치 방식을 주로 사용하지만 데스크탑은 아직까지도 마우스와 키보드를 주로 사용한다.
반응형 웹디자인 반응형 웹페이지 디자인(responsive web design: RWD) - 웹페이지가 사용자의 환경을 읽어서 적절하게 반응하는 페이지 By 웹디자이너 에단 마르코트(Ethan Marcotte)
예제 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Web Design</title> <style> #page { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 50px; } #main { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; }
예제 @media screen and (max-width: 980px) { #page { width: 94%; } #main { width: 65%; } #sidebar { width: 30%; } } @media screen and (max-width: 700px) { #main { width: auto; float: none; } #sidebar { width: auto; float: none; } @media screen and (max-width: 480px) { #header { height: auto; } h2 { font-size: 24px; } #sidebar { display: none; }
예제 #header, #main, #sidebar, #footer { border: solid 1px red; } #header { background-color: yellow; } #sidebar { background-color: aliceblue; } #main { background-color: aqua; } #footer { background-color: coral; } </style> </head>
예제 <body> <div id="page"> <div id="header"> <h2>Header</h2> </div> <div id="main"> <h2>Main</h2> ... 에단이 기고한 글은 http://alistapart.com/article/responsive-web-design에서 볼 수 있다. <div id="sidebar"> <h2>Sidebar</h2> <ul> <li>Fluid Grids</li> <li>Media Queries</li> </ul> <div id="footer"> <h2>Footer</h2> </body> </html>
실행 결과 웹브라우저에서 실행하기
jQuery Mobile jQuery Mobile은 모바일 프레임워크 중의 하나 jQuery Mobile 터치-기반의 HTML5 UI 프레임워크 jQuery Mobile로 작성한 웹앱은 모든 종류의 스마트폰, 태블릿, 데스크탑에서 소스의 변경없이 동일한 모습으로 실행될 수 있다.
예제 <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head>
기본 예제 <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div> <!-- /header --> <div data-role="content"> <p>안녕하세요? jQuery에 오늘 입문하였습니다.</p> <!-- /content --> <div data-role="footer"> <h4>Thank you!</h4> <!-- /footer --> <!-- /page --> </body> </html>
리스트뷰 <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> </html>
리스트뷰 <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div> <!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Benz</a></li> <li><a href="#">BMW</a></li> <li><a href="#">AUDI</a></li> <li><a href="#">현대자동차</a></li> <li><a href="#">기아자동차</a></li> </ul> <!-- /content --> <div data-role="footer"> <h4>Thank you!</h4> <!-- /footer --> <!-- /page --> </body> </html>
슬라이더 ... <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div> <!-- /header --> <div data-role="content"> <p>안녕하세요? jQuery에 오늘 입문하였습니다.</p> <form> <label for="slider-0">Input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> </form>
슬라이더 <!-- /content --> <div data-role="footer"> <h4>Thank you!</h4> </div> <!-- /footer --> <!-- /page --> </body> </html>
버튼 ... <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div> <!-- /header --> <div data-role="content"> <p>안녕하세요? jQuery에 오늘 입문하였습니다.</p> <a href="#" data-role="button" data-icon="star">Star button</a> <!-- /content --> <div data-role="footer"> <h4>Thank you!</h4> <!-- /footer --> <!-- /page --> </body> </html>
기타 UI 컴포넌트 http://jquerymobile.com/demos
UI 빌더 codiqa UI 빌더
레스토랑 추천앱 웹브라우저로 실행
Q & A