아이콘 css 추가
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
body에 다음의 내용을 기술
<!-- 페이지 구성 -->
<div data-role="page" id="main" data-theme="a" >
<div data-role="header" data-theme="a">
<div id="m-logo">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-bars ui-btn-icon-notext">bars</button>
<a href="#" class="ui-btn ui-btn-inline logo"><img src="img/logo1.png"></a>
</div>
<div id="navbar">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</div>
<input type="search" name="password" id="search" value="" placeholder="검색">
</div>
<div data-role="content" class="section">
<h2>컨텐트</h2>
<p><a href="app5_sub.html" data-transition="slide" data-role="button">서브페이지 이동</a></p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
<p>컨텐트의 내용</p>
</div>
<div data-role="footer" >
<h2>푸터</h2>
</div>
<div data-role="footer" id="toolbar" data-position="fixed">
<ul class="tool-list">
<li><a href="#" class="fa fa-home"></a></li>
<li><a href="#" class="fa fa-book"></a></li>
<li><a href="#" class="fa fa-question-circle"></a></li>
<li><a href="#" class="fa fa-bullhorn"></a></li>
<li><a href="#" class="fa fa-th"></a></li>
</ul>
</div>
</div>
html,body{height:100%;}
.ui-page{height:100%;}
.ui-header{padding:10px 5px;}
#m-logo{display:inline-block; }
#m-logo img{width:100%;}
.ui-btn{margin:0; padding:10px;}
.logo{width:30px; padding:0;}
#navbar{display:inline-block; margin-top:5px; vertical-align:middle;}
#navbar>ul{list-style:none; text-align:center; padding:0; margin:0;}
#navbar>ul>li{display:inline-block; font-size:1em; float:left; margin-left:5px; }
#navbar>ul>li>a{text-decoration:none; }
.tool-list{list-style:none; margin:0; padding:0; text-align:center;}
.tool-list>li{display:inline-block; margin:5px;}
.tool-list>li>a{font-size:1em; text-decoration:none; }
.fa{display:inline-block; width:50px; height:40px; position:relative; }
.fa-home:before,
.fa-book:before,
.fa-question-circle:before,
.fa-bullhorn:before,
.fa-th:before{font-size:1.2em;}
.fa-home:after,
.fa-book:after,
.fa-question-circle:after,
.fa-bullhorn:after,
.fa-th:after{
position:absolute;
left:0; bottom:0;
font-size:0.75em;
width:100%;
}
.fa-home:after{content:"홈"}
.fa-book:after{content:"공부방";}
.fa-question-circle:after{content:"질문방"}
.fa-bullhorn:after{content:"공지방"}
.fa-th:after{content:"포폴"}
jQuery없음