JQuery

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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

성내는 자는 상정(常情)에 의한 것이라서 겁낼 것 없지만, 성내야 할 일에 웃는 자는 그 자의 심중을 헤아릴 수 없어 더욱 무서운 것이다. -잡편

댓글 ( 0)

댓글 남기기

작성