HTML5와 CSS3.0 기본활용
전자정부 모바일 표준프레임워크는 HTML5 구조와 문법, CSS3.0 기본 활용에 관한 디자인 가이드를 제공한다.
사용자 경험 (UX) 선언
전자정부 모바일은 HTML5 의 DOCTYPE 으로 선언하여야 한다.
문서에 사용된 문자 인코딩을 간소화된 구문을 통해 meta 태그를 사용할 수 있다.문서의 인코딩은 “UTF-8” 사용을 권장한다.
- <!DOCTYPE html>
- <html>
- <head>
- <title>eGovFrame</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.4.5.css"/>
- <link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile-1.4.5.css" />
- <script src="/js/egovframework/mbl/cmm/jquery-1.11.2.min.js"></script>
- <script src="/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.js"></script>
- <script src="/js/egovframework/mbl/cmm/EgovMobile-1.4.5.js"></script>
- </head>
- <body>
- ...
- </body>
- </html>
모바일 페이지 구조
모바일 의 Page 구조는 DIV 태그의 data-role=“page” 속성을 이용하여 표출 한다.
Page 내부의 구조는 마찬가지로 data-role 의 header, contents, footer 의 속성을 이용하여 표출 한다.
- <body>
- <!-- 모바일 페이지 start -->
- <div data-role="page">
- <!-- header start -->
- <div data-role="header">
- <h1>header Title</h1>
- </div>
- <!-- header end -->
- <!-- content start -->
- <div data-role="content">
- <p>전자정부 모바일 표준프레임워크 default Page 화면 입니다.</p>
- </div>
- <!-- content end -->
- <!-- footer start -->
- <div data-role="footer">
- <h4>footer title</h4>
- </div>
- <!-- footer end -->
- </div>
- <!-- 모바일 페이지 end -->
- </body>