504
No
테마 만들기
http://themeroller.jquerymobile.com/
<style type="text/css">
#logDiv{
background-color: #AB0000;
}
#logo {
width:176px;
height:132px;
text-indent:-9999px;
background-image: url(themes/images/MACARONIC_TITLE.png);*/
//background-image: url(../../images/CI_TITLE.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.title_style {
color: #3F3C30;
padding-top: 10px;
}
</style>
<div data-role="header" data-theme="b" id="logDiv">
<h2 id="logo">가상 대학교</h2>
</div>
리스트 제거
<ul data-role="listview" data-inset="true">
data-insert="true" 안쪽으로 자동 셋팅.
class="ui-li-thumb"
=>썸네일 효과
class="ui-li-icon"
=>아이콘 효과
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MacaronicsMobile</title>
<link rel="stylesheet" href="themes/MacaronicsMobile.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
#logDiv{
background-color: #AB0000;
}
#logo {
width:176px;
height:132px;
text-indent:-9999px;
background-image: url(themes/images/MACARONIC_TITLE.png);*/
//background-image: url(../../images/CI_TITLE.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.title_style {
color: #3F3C30;
padding-top: 10px;
}
</style>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-theme="b" id="logDiv">
<h2 id="logo">가상 대학교</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="index.html">
<img src="themes/images/pic_i.png" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스이미지</h3>
</a>
</li>
<li ><a href="#" >
<img src="themes/images/intro_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">대학교소개</h3>
</a>
</li>
<li><a href="#">
<img src="themes/images/movie_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">홍보동영상</h3>
</a>
</li>
<li><a href="#" >
<img src="themes/images/map_i.png" alt="" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스맵</h3>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
=>결과
http://braverokmc2.dothome.co.kr/junho/ex11/index.html
미션
1. 스탠포드 대학교(m.stanford.edu)
* 주소 : http://m.stanford.edu
* PC에서 확인 가능합니다.
2. 슬라이드쉐어
* 주소 : www.slideshare.net
* 반드시 스마트폰으로 접속해야 모바일 웹을 확인할 수 있습니다.
3. JQuery Mobile의 데모
* 주소 : http://jquerymobile.com/demos/1.0.1/
* [http://jquerymobile.com - Docs] 메뉴로 이동합니다.
* 1.0.1 버전은 계속 업그레이드 되므로 다를 수 있습니다.
* PC에서 확인 가능합니다.
댓글 ( 4)
댓글 남기기