상세 컨텐츠

본문 제목

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

PHP(Class)

by 김일국 2017. 6. 1. 16:35

본문

이번포스트 목표: 왼쪽메뉴가 있는 서브페이지 퍼블리싱

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

퍼블리싱 서브확인URL: http://timespace12.dothome.co.kr/publish/sub.html


* 위 부분을 사용중지로 처리 하고 몇가지를 손보았다.
<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" />
-->

* 위 부분을 사용중지로 처리 하고 몇가지를 손보았다.(아래는 서브페이지)

아래는 소스 코드임(서브)

<!-- 바디 [실제퍼블리싱 영역] /바디 -->
<!--
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
-->
<!-- ================== 메인/서브 공통부분 ==================== -->
<!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>서브 Page</title>
<!-- CSS  기본 XE 스트일 사용중지
<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="sub.html">대메뉴_01</a></li>
      <li><a href="sub.html">대메뉴_02</a></li>
      <li><a href="sub.html">대메뉴_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="index.html">로그인</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><!-- /상단 네비 -->

<!-- 서브 비주얼 -->
<header class="bs-docs-jumbotron subhead">
 <div class="container">
 <h1>Getting started</h1>
 <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
 </div>
</header><!-- /서브 비주얼 -->

<!-- 컨테이너_본문 -->
<div class="container">
 <div class="row">
  <!-- 왼쪽메뉴 -->
  <div class="span3 bs-docs-sidebar">
   <ul class="nav nav-list bs-docs-sidenav">
    <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
   </ul>
  </div><!-- /왼쪽메뉴 -->
  
  <div class="span9">
   <section>
   <div class="page-header">
     <h1>1. Download</h1>
   </div>
   <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
   <div class="row">
     <div class="span6">
       <h2>Compiled</h2>
       <p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
       <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
     </div>
     <div class="span6">
       <h2>Source</h2>
       <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
       <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
     </div>
     <div class="span6">
       <h2>Bower</h2>
       <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
       {% highlight bash %}bower install bootstrap{% endhighlight %}
     </div>
   </div>
   </section>
   <section>
     <form class="form-signin">
       <h2 class="form-signin-heading">Please sign in</h2>
       <input type="text" class="input-block-level" placeholder="Email address"><!-- autofocus -->
       <input type="password" class="input-block-level" placeholder="Password">
       <label class="checkbox">
         <input type="checkbox" value="remember-me"> Remember me
       </label>
       <button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
     </form>
   </section> <!-- /section-->
  </div><!-- /.span9 -->
 </div><!-- /row -->
</div><!-- /컨테이너_본문 -->
 
<!-- 컨테이너_푸터 -->
<div class="container">
     <p>Powered by <a href="http://xpressengine.com/">XE</a>.</p>
</div><!-- /컨테이터_푸터 -->

<!-- 부트스트랩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>

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


# 다음 포스트에서는 네이버XE에 위 퍼블리싱 한 소스를 적용하는 작업을 보이겠습니다. 드디어 본격적인 XE시작 입니다.

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

부트스트랩3.x 용 레이아웃 퍼블리싱_07(네이버xe레이아웃을위한)  (0) 2017.06.03
부트스트랩3.x 용 레이아웃 퍼블리싱_06(네이버xe레이아웃을위한)  (0) 2017.06.02
부트스트랩3.x 용 레이아웃 퍼블리싱_04(네이버xe레이아웃을위한)  (0) 2017.05.31
부트스트랩3.x 용 레이아웃 퍼블리싱_03(네이버xe레이아웃을위한)  (0) 2017.05.30
부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한)  (0) 2017.05.29

관련글 더보기

댓글 영역

티스토리툴바