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

이번포스트 목표: 퍼블리싱한 css, html 을 XE에(layout.html파일) 적용

퍼블리싱 메인확인URL: http://timespace12.dothome.co.kr/publish/

XE 확인URL: http://timespace12.dothome.co.kr/xe/
작업전에 네이버XE에 신규레이아웃을 제작해 두어야 합니다. (관련글참조: http://blog.daum.net/web_design/454 )

앞으로 작업하게 될 신규 레이아웃의 위치는 아래와 같습니다.(/xe/layouts/new/layout.html)

위 작업전에 XE에서 부트스트랩과 충돌나는 아래 부분을 사용하지 않도록 조치를 취합니다.

<!-- CSS  기본 XE 스트일 사용중지
<link rel="stylesheet" href="/xe/common/css/xe.min.css?20170520175852" />
-->

위 코드는 XE에서 전용함수로 불러와 지기 때문에, php코드를 수정하거나, css파일 자체를 수정해야 하는데, 저는 후자를 선택 했습니다.

즉, 다음 파일을 xe/common/css/xe.min.css 내용 -> /* 기존css내용 */ 으로 주석처리해서 사용하지 못하게 처리 했습니다.

여기까지 하시면, 부트스트랩을 적용할 기본 처리가 되어있다고 여기시면 됩니다.

이제 본격적으로 layout.html파일을 수정하겠습니다.

<?php

/* 기존 XE 메인페이지 부분을 모두 주석 처리 합니다.(지워도 되지만, 내부에서 사용된 xe전용함수를 참조하기 위해서 입니다.

<load target="default.layout.css" />

...

*/

?>

그리고, 신규 디자인으로 퍼블리싱된 아래 코드를 붙여 넣습니다.(이전 포스트에서 작업한 내용에서 경로를 절대 경로로 변경했습니다.)

그래서 실제 layout.html 파일 내용은 아래부터 입니다. 확인 결과 정상으로 나오는 것을 볼 수 있습니다.

아직까진 링크값에 {geturl('')} 처럼 xe전용 코드가 정상 작동되는 것을 간단히 볼 수 있습니다.

<!-- 부트스트랩3 관련 -->
<link href="/publish/assets/css/bootstrap.css" rel="stylesheet">
<link href="/publish/assets/css/docs.css" rel="stylesheet">
<link href="/publish/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="/publish/assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- 아이콘 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/publish/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/publish/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/publish/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/publish/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/publish/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="{geturl('')}">부트스트랩 3.x</a>
  <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"><a href="{geturl('')}">Home</a></li>
      <li><a href="{geturl('')}">대메뉴_01</a></li>
      <li><a href="{geturl('')}">대메뉴_02</a></li>
      <li><a href="{geturl('')}">대메뉴_03</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">풀다운메뉴<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>
        </ul>
      </li>
    </ul>
    <ul class="nav user-right">
      <li><a href="{geturl('')}">로그인</a></li>
    </ul>
    <form class="navbar-form" role="search">
   <div class="input-group">
   <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   <div class="input-group-btn">
   <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
   </div>
   </div>
    </form>
  </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="/publish/assets/img/examples/slide-01.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크2">
     <img src="/publish/assets/img/examples/slide-02.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크3">
     <img src="/publish/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="container">
 <h4>XE core '1.7.3.6' 설치를 환영합니다!</h4>
 <div class="row">
  <div class="span4">
  <img class="marketing-img" src="/publish/assets/img/bs-docs-twitter-github.png">
  <h2>By nerds, for nerds.</h2>
  <p>Built at Twitter by <a href="{geturl('')}">@mdo</a> and <a href="{geturl('')}">@fat</a>, Bootstrap utilizes <a href="{geturl('')}">LESS CSS</a>, is compiled via <a href="{geturl('')}">Node</a>, and is managed through <a href="{geturl('')}">GitHub</a> to help nerds do awesome stuff on the web.</p>
  </div>
  <div class="span4">
  <img class="marketing-img" src="/publish/assets/img/bs-docs-responsive-illustrations.png">
  <h2>Made for everyone.</h2>
  <p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
  </div>
  <div class="span4">
  <img class="marketing-img" src="/publish/assets/img/bs-docs-bootstrap-features.png">
  <h2>Packed with features.</h2>
  <p>A 12-column responsive <a href="{geturl('')}">grid</a>, dozens of components, <a href="{geturl('')}">JavaScript plugins</a>, typography, form controls, and even a <a href="customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
  </div>
 </div><!-- /.row -->
</div><!-- /컨테이너_본문 -->
 
<!-- 컨테이너_푸터 -->
<div class="container">
     <p>Powered by <a href="http://xpressengine.com/">XE</a>.</p>
</div><!-- /컨테이너_푸터 -->

<!-- 부트스트랩3 관련 -->
<script src="/publish/assets/js/jquery.js"></script>
<script src="/publish/assets/js/bootstrap-transition.js"></script>
<script src="/publish/assets/js/bootstrap-alert.js"></script>
<script src="/publish/assets/js/bootstrap-modal.js"></script>
<script src="/publish/assets/js/bootstrap-dropdown.js"></script>
<script src="/publish/assets/js/bootstrap-scrollspy.js"></script>
<script src="/publish/assets/js/bootstrap-tab.js"></script>
<script src="/publish/assets/js/bootstrap-tooltip.js"></script>
<script src="/publish/assets/js/bootstrap-popover.js"></script>
<script src="/publish/assets/js/bootstrap-button.js"></script>
<script src="/publish/assets/js/bootstrap-collapse.js"></script>
<script src="/publish/assets/js/bootstrap-carousel.js"></script>
<script src="/publish/assets/js/bootstrap-typeahead.js"></script>
<script src="/publish/assets/js/bootstrap-affix.js"></script>

<script src="/publish/assets/js/holder/holder.js"></script>
<script src="/publish/assets/js/google-code-prettify/prettify.js"></script>
<!--[if lt IE 9]>
<script src="/publish/assets/js/respond/respond.min.js"></script>
<![endif]-->

<script src="/publish/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>
/* 너비값 사용자 지정시 참조-나중에 기본모니터가 풀FD급 이상일때는 변경하시면 됩니다.
 .container { max-width:1170px !important; }
*/
.user-right { float:right !important; margin-top:0px !important;  }
.navbar-form { margin-top:0px; width:250px;float:right; }
@media (max-width: 979px) {
 /* 아래코드는 모바일에서 상단메뉴부분을 고정하지 않을때(서브메뉴가 많을때 필요) */
  body {padding-top:0px !important;}
 .navbar-fixed-top { position:relative !important; }
 .dropdown-menu { position:relative !important; }
 /* 위에서 모바일에서 상단메뉴부분 고정할때는...position; */
 .user-right { width:100%; }
 .container { text-align:center; }
 .navbar-form { width:100%; }
 section { text-align:left; }
}
</style><!-- /사용자 스타일 추가 -->