상세 컨텐츠

본문 제목

부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한)

PHP(Class)

by 김일국 2017. 5. 29. 17:22

본문

이번포스트 목표: 부트스트랩3.x용 반응형 메뉴와 캐러젤(Crousel) 슬라이더 적용하기

- 확인 URL: http://timespace12.dothome.co.kr/publish/


- 소스코드 확인(아래)


<!-- 바디 [실제퍼블리싱 영역] //바디 -->
<!--
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
-->
<!-- ================== 메인/서브 공통부분 ==================== -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 주) 이 코드가 없으면 모바일기기에서 PC버전으로 보이게 됨 -->
<meta charset="utf-8">
<meta name="Generator" content="XpressEngine">
<!-- TITLE -->
<title>Welcome Page</title>
<!-- CSS -->
<link rel="stylesheet" href="/xe/common/css/xe.min.css?20170520175852" />
<link rel="stylesheet" href="/xe/common/js/plugins/ui/jquery-ui.css?20170520175852" />
<link rel="stylesheet" href="/xe/layouts/new/default.layout.css?20170520175852" />
<!--[if lt IE 9]><link rel="stylesheet" href="/xe/layouts/new/default.layout.ie78.css?20170520175852" />
<![endif]--><!--[if IE 7]><link rel="stylesheet" href="/xe/layouts/new/default.layout.ie7.css?20170520175852" />
<![endif]--><link rel="stylesheet" href="/xe/modules/editor/styles/default/style.css?20170520175853" />
<link rel="stylesheet" href="/xe/widgets/login_info/skins/default/default.login.css?20170520175852" />
<!-- JS -->
<script src="/xe/common/js/jquery.min.js?20170520175852"></script>
<script src="/xe/common/js/x.min.js?20170520175852"></script>
<script src="/xe/common/js/xe.min.js?20170520175852"></script>
<!--[if lt IE 9]><script src="/xe/common/js/respond.min.js?20170520175852"></script>
<![endif]--><script src="/xe/widgets/login_info/skins/default/default.login.js?20170520175852"></script>
<!--[if lt IE 9]><script src="/xe/common/js/html5.js"></script><![endif]-->
</head>
<body>
<!-- //================== 메인/서브 공통부분 ==================== -->
<!-- 바디 -->

<!-- 부트스트랩3 관련 -->
 <link href="assets/css/bootstrap.css" rel="stylesheet">
 <link href="assets/css/docs.css" rel="stylesheet">
 <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
 <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <script src="assets/js/respond/respond.min.js"></script>
 <![endif]-->
 <!-- 아이콘 -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
 <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
 <link rel="shortcut icon" href="assets/ico/favicon.png">
<!-- //부트스트랩3 관련 -->

<!-- 컨테이너 -->

<!-- 헤더 -->
<!-- 상단 네비 -->
    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse" href="#">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="navbar-brand" href="index.html">부트스트랩 3.x</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="#">대메뉴_01</a></li>
            <li><a href="#">대메뉴_02</a></li>
            <li><a href="#">대메뉴_03</a></li>
            <li><a href="#">대메뉴_04</a></li>
            <li><a href="#">대메뉴_05</a></li>
            <li><a href="#">대메뉴_06</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">대메뉴_07<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">서브메뉴_01</a></li>
                <li><a href="#">서브메뉴_02</a></li>
                <li><a href="#">서브메뉴_03</a></li>
                <li><a href="#">서브메뉴_04</a></li>
                <li><a href="#">서브메뉴_05</a></li>
                <li><a href="#">서브메뉴_06</a></li>
                <li><a href="#">서브메뉴_07</a></li>
                <li><a href="#">서브메뉴_08</a></li>
                <li><a href="#">서브메뉴_09</a></li>
                <li><a href="#">서브메뉴_10</a></li>
                <li><a href="#">서브메뉴_11</a></li>
                <li><a href="#">서브메뉴_12</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
<!-- //상단 네비 -->
<!-- 메인 비주얼 -->
<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
   <li data-target="#myCarousel" data-slide-to="1"></li>
   <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
   <div class="item active">
     <a href="#" title="링크1">
     <img src="assets/img/examples/slide-01.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크2">
     <img src="assets/img/examples/slide-02.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크3">
     <img src="assets/img/examples/slide-03.jpg" alt="">
     </a>
   </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>
<!-- //메인 비주얼 -->
<!-- //헤더 -->

<!-- 본문 -->
<div class="body main">
 메인/서브 퍼블리싱에 따라서 css클래스명 변경 body main / body sub
 <nav class="lnb">
  서브페이지 때만 lnb(Local Navigation Bar) 메뉴출력
 </nav>
 <div class="content" id="content">
  본문 내용
 </div>
</div>
<!-- //본문 -->
 
<!-- //컨테이너 -->

<!-- 푸터 -->
<footer>
     푸터 내용
</footer>
<!-- //푸터 -->

<!-- 부트스트랩3 관련 -->
 <script src="assets/js/jquery.js"></script>
 <script src="assets/js/bootstrap-transition.js"></script>
 <script src="assets/js/bootstrap-alert.js"></script>
 <script src="assets/js/bootstrap-modal.js"></script>
 <script src="assets/js/bootstrap-dropdown.js"></script>
 <script src="assets/js/bootstrap-scrollspy.js"></script>
 <script src="assets/js/bootstrap-tab.js"></script>
 <script src="assets/js/bootstrap-tooltip.js"></script>
 <script src="assets/js/bootstrap-popover.js"></script>
 <script src="assets/js/bootstrap-button.js"></script>
 <script src="assets/js/bootstrap-collapse.js"></script>
 <script src="assets/js/bootstrap-carousel.js"></script>
 <script src="assets/js/bootstrap-typeahead.js"></script>
 <script src="assets/js/bootstrap-affix.js"></script>
 
 <script src="assets/js/holder/holder.js"></script>
 <script src="assets/js/google-code-prettify/prettify.js"></script>
 <!--[if lt IE 9]>
 <script src="assets/js/respond/respond.min.js"></script>
 <![endif]-->
 
 <script src="assets/js/application.js"></script>
<!-- //부트스트랩3 관련 -->

<!-- 사용자 js추가 -->
<script type="text/javascript" language="javascript">
//!를 사용하면 함수는 단항(논리적) NOT연산자의 단일 피연산자가됨. 이렇게하면 함수가 표현식으로 평가되므로 강제로 인라인으로 호출 할 수 있습니다.
!function($){
  $(function(){
    var $window = $(window)
    $('.carousel').carousel({
     interval:2000
    });
})
}(window.jQuery)
//(window.jQuery)는 원래 jQuery Object에 $대한 별칭을 만들고, 다른 라이브러리가 충돌없이 항상 그 jQuery object내부를 참조 하도록 보장함.
</script>
<!-- //사용자 js추가 -->
<!-- 사용자 스타일 추가 -->
<style>
@media (max-width: 979px) {
 .container { width: 100% !important; }
}
/* 반응형 CSS사용예 필요시 사용
--------------------------------------------------
.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}
@media (max-width: 979px) {
  .carousel .item {
    height: 500px;
  }
  .carousel img {
    width: auto;
    height: 500px;
  }
}
@media (max-width: 767px) {
  .carousel .item {
    height: 300px;
  }
  .carousel img {
    height: 300px;
  }
}
*/
</style>
<!-- //사용자 스타일 추가 -->

<!--  //바디 -->
<!-- ================== 메인/서브 공통부분 ==================== -->
<script src="/xe/addons/autolink/autolink.js?20170521184820"></script>
<script src="/xe/common/js/plugins/ui/jquery-ui.min.js?20170520175852"></script>
<script src="/xe/common/js/plugins/ui/jquery.ui.datepicker-ko.js?20170520175852"></script>
<script src="/xe/addons/resize_image/js/resize_image.min.js?20170521184820"></script>
<script src="/xe/layouts/new/default.layout.js?20170520175852"></script>
<script src="/xe/files/cache/js_filter_compiled/30bafb68498c64b466579e488f27113e.ko.compiled.js?20170521191555"></script>
<script src="/xe/files/cache/ruleset/ede42a495c65a9393860a66b824264ca.ko.js?20170521191555"></script>
<!-- //================== 메인/서브 공통부분 ==================== -->
</body>

'PHP(Class)' 카테고리의 다른 글

부트스트랩3.x 용 레이아웃 퍼블리싱_04(네이버xe레이아웃을위한)  (0) 2017.05.31
부트스트랩3.x 용 레이아웃 퍼블리싱_03(네이버xe레이아웃을위한)  (0) 2017.05.30
부트스트랩3.x 용 레이아웃 퍼블리싱_01(네이버xe레이아웃을위한)  (0) 2017.05.28
네이버XE HTML기본 구조 및 부트스트랩3.x 기본지식  (0) 2017.05.28
네이버XE(제로보드xe) XE템플릿 코드로 게시판 수정  (0) 2017.05.23

관련글 더보기

댓글 영역

티스토리툴바