컴퓨터/jQuery

[jquery mobile] 01

수제녹차 2020. 1. 29. 15:06
728x90
반응형
<!-- jQuery Mobile은 HTML5에 최적화 되어 있기 때문에 doctype으로 HTML5를 사용한다 -->
<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
        <!-- 모바일 디바이스를 위한 설정, 디바이스 폭에 맞게 웹 페이지를 열 것, 웹 페이지를 확대하지 말 것 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!-- jQuery mobile에서 사용하는 css, javascript. 아래 3개의 리소스를 로드해야 함 -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 
<!-- data-role는 jQuery mobile에서 해당 엘리먼트가 어떤 UI인지를 지정한다. 아래 page는 이 엘리먼트가 가장 큰 단위인 페이지임을 의미한다. -->
<!-- page : 모든 시각적인 구성 요소를 포괄하는 단위 -->
<div data-role="page">
        <!-- 제목과 글로벌 메뉴를 표시하는 엘리먼트를 지정 -->
    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->
        <!-- 컨텐츠가 표시되는 영역을 지정 -->
    <div data-role="content"> 
        <p>Hello world</p>
        <!-- listview : 리스트 UI가 만들어진다 -->
        <!-- data-inset : 리스트가 전체를 차지하지 않게 한다 -->
        <!-- 위쪽에 filter item 검색 창이 떠서 간단하게 검색창을 만들 수 있다 -->
        <ul data-role="listview" data-inset="true" data-filter="true">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>    
    </div><!-- /content -->
 
</div><!-- /page -->
 
</body>
</html>

출처 : 생활코딩

반응형