678
No
responsive.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 메타태그 : 웹페이지에 대한 부가적인 정보를
제공하는 태그
검색엔진을 위한 정보, 페이지 이동 옵션
캐시 사용 여부 등
뷰포트 : 전체 컨텐츠 중에서 현재 화면에 표시되는 부분
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.js">
</script>
<style>
#page {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 50px;
background-color: yellow;
}
#main {
width: 600px;
float: left;
background-color: aqua;
}
#sidebar {
width: 300px;
float: right;
background-color: aliceblue;
}
#footer {
clear: both;
background-color: coral;
}
#header, #main, #sidebar, #footer {
border: solid 1px red;
}
/* 미디어 쿼리
미디어 타입 : all, print, projection, screen, speech, tv
*/
@media screen and (max-width: 980px) {
#page {
width: 94%;
}
#main {
width: 65%;
}
#sidebar {
width: 30%;
}
}
@media screen and (max-width: 700px) {
#main {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h2 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h2>Header</h2>
</div>
<div id="main">
<h2>Main</h2>
데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해 디자인된
웹페이지는...데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해 디자인된
웹페이지는...데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해 디자인된 웹페이지는...데스크탑을 위해
</div>
<div id="sidebar">
<h2>Slider</h2>
<ul>
<li>Fluid Grids</li>
<li>Media Queries</li>
</ul>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
jqm_basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jquery mobile css -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- jquery 1.8~1.11 , 2.1 -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- jquery mobile js 파일 -->
<script
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<p>안녕하세요 jQuery mobile</p>
</div>
<ul data-role="listview" data-inset="true"
data-filter="true">
<li><a href="#">Benz</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">아우디</a></li>
<li><a href="#">현대</a></li>
<li><a href="#">기아</a></li>
</ul>
<div data-role="footer">
<h4>Thank you</h4>
</div>
</div>
</body>
</html>
slider.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<form>
<label for="slider-0">슬라이더:</label>
<input type="range"
name="slider" id="slider-0" value="25"
min="0" max="100">
<a href="#" data-role="button" data-icon="star">버튼1</a> <a
href="#" data-role="button" data-icon="home">버튼2</a> <a
href="#" data-role="button" data-icon="search">버튼3</a> <a
href="#" data-role="button" data-icon="shop">버튼4</a> <a
href="#" data-role="button" data-icon="user">버튼5</a>
<!-- 1.3.1에서 테스트 -->
<div data-role="button">버튼6</div>
</form>
</div>
<div data-role="footer">
<h4>Thank you</h4>
</div>
</div>
</body>
</html>
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- p.644 index.html -->
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div id="title">
<h1>레스토랑 추천</h1>
</div>
<div class="choice_list">
<h1>음식 종류를 선택하세요.</h1>
<!-- 페이지 전환효과(data-transition)
slide 좌에서 우로
slideup 아래에서 위로
slidedown 위에서 아래로
pop
fade
flip 반전효과
-->
<ul data-role="listview" data-inset="true">
<li><a href="choose_town.html"
data-transition="flip">
<img src="../images/korean.jpg">
<h3>한정식</h3>
</a></li>
<li><a href="choose_town.html" data-transition="slideup">
<img src="../images/western.jpg">
<h3>양식</h3>
</a></li>
<li><a href="choose_town.html" data-transition="slidedown">
<img src="../images/burger.jpg">
<h3>햄버거</h3>
</a></li>
<li><a href="choose_town.html" data-transition="pop">
<img src="../images/pizza.jpg">
<h3>피자</h3>
</a></li>
<li><a href="choose_town.html" data-transition="fade">
<img src="../images/buffet.jpg">
<h3>부페</h3>
</a></li>
<li><a href="choose_town.html" data-transition="flip">
<img src="../images/chinese.jpg">
<h3>중국식</h3>
</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
2. choose_town.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- p.647 choose_town.html -->
<div id="select_loc" data-role="page"
data-add-back-btn="true">
<div data-role="header">
<h1>레스토랑 추천</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1>지역을 선택하세요</h1>
<ul data-role="listview" data-inset="true"
data-filter="true">
<li><a href="choose_restaurant.html" data-transition="slidedown">
강남구 <span class="ui-li-count">3</span>
</a></li>
<li><a href="choose_restaurant.html" data-transition="slidedown">
종로구 <span class="ui-li-count">4</span>
</a></li>
<li><a href="choose_restaurant.html" data-transition="slidedown">
송파구 <span class="ui-li-count">1</span>
</a></li>
<li><a href="choose_restaurant.html" data-transition="slidedown">
마포구 <span class="ui-li-count">3</span>
</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3. choose_restaurant.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- p.649 choose_restaurant.html -->
<div id="select_rest" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>레스토랑 추천</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1>레스토랑을 선택하세요.</h1>
<ul data-role="listview" data-inset="true">
<li><a href="restaurant.html" data-transition="slidedown">
<img src="../images/rest1.jpg">
<h2>퍼 세이</h2>
<p class="classement four">3 stars</p>
</a></li>
<li><a href="restaurant.html" data-transition="slidedown">
<img src="../images/rest2.jpg">
<h2>노마</h2>
<p class="classement four">4 stars</p>
</a></li>
<li><a href="restaurant.html" data-transition="slidedown">
<img src="../images/rest3.jpg">
<h2>아르삭</h2>
<p class="classement one">2 stars</p>
</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
4. restaurant.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>레스토랑 추천 앱</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div id="show_rest" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>레스토랑 추천</h1>
</div>
<div data-role="content">
<div class="ui-grid-a" id="restau_infos">
<div class="ui-block-a">
<h1>스마일 즉석떡볶이</h1>
<p>메뉴:</p>
<ul>
<li>치즈 떡볶이</li>
<li>즉석 떡볶이</li>
<li>볶음밥</li>
</ul>
</div>
<div class="ui-block-b">
<p>
<img src="../images/staticmap.png" alt="" />
</p>
<p>
<a href="https://www.mangoplate.com/restaurants/dZxXu3udKc"
rel="external" data-role="button">웹사이트</a>
</p>
</div>
</div>
<!-- /grid-a -->
<hr />
<div class="ui-grid-a" id="contact_infos">
<div class="ui-block-a">
<h2>주소</h2>
<p>서울 성동구 마조로 39</p>
</div>
</div>
<!-- /grid-a -->
<div id="contact_buttons">
<a
href="http://map.naver.com/?elng=d8b75cdf8576efdb5f23911862e82a9c&eelat=&elat=4cc77f9ed43a6766d4fa762b932c549e&eText=%EC%8A%A4%EB%A7%88%EC%9D%BC%EC%A6%89%EC%84%9D%EB%96%A1%EB%B3%B6%EC%9D%B4&eelng="
data-role="button" data-icon="maps"> 네이버 지도에서 찾기</a>
<a href="tel:021234567" data-role="button" data-icon="tel"> 전화번호 </a>
</div>
<hr />
<div id="notation">
<form>
<label for="select-choice-0" class="select">
<h2>사용자 평가</h2>
</label>
<select name="note_utilisateur" id="note_utilisateur"
data-native-menu="false" data-theme="c">
<option value="one" class="one">추천할 수 없음</option>
<option value="two" class="two">보통</option>
<option value="three" class="three" selected="selected">좋음
</option>
<option value="four" class="four">아주좋음</option>
</select>
</form>
</div>
</div>
</div>
<!-- /page -->
</body>
</html>
댓글 ( 4)
댓글 남기기