브라우저 제목

보기

html

아이콘 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>

 

css

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없음

제목 날짜
탭-collapsible 및 구글맵을 이용한 현재 위치 찾기 file 2018.02.04
패널을 이용한 메뉴와 그리드 file 2018.02.01
갤러리화면을 만들기 위한 fotorama 플러그인 file 2018.01.31
index ui구성2 file 2018.01.30
index의 ui구성 file 2018.01.29
여러 페이지를 이용하여 화면 구성 file 2018.01.28
한 페이지에 여러화면을 구성 file 2018.01.28
jquey mobile 테마정하기 file 2018.01.28
기본 페이지 작성 file 2018.01.28
phonegap을 사용하기 위한 준비 작업 file 2018.01.24
태그 목록