상세 컨텐츠

본문 제목

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

PHP(Class)

by 김일국 2017. 5. 31. 16:14

본문

이번포스트 목표: 부트스트랩3.x용 반응형 본문과 푸터 적용하기 (상단네베에 검색과 로그인버튼 추가)

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

- 비교 xe : http://timespace12.dothome.co.kr/xe/

XE의 로그인 CSS가 모듈로 되어 있는데, 반응형으로 변경시 문제가 발생해서, 로그인부분을 로그인페이지로 이동하게 디자인했음.


- 소스코드 확인(아래)

<!-- 바디 [실제퍼블리싱 영역] /바디 -->
<!--
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
-->
<!-- ================== 메인/서브 공통부분 ==================== -->
<!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  기본 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><!-- /상단 네비 -->

<!-- 메인 비주얼 -->
<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="container">
 <h4>XE core '1.7.3.6' 설치를 환영합니다!</h4>
 <div class="row">
  <div class="span4">
  <img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
  <h2>By nerds, for nerds.</h2>
  <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
  </div>
  <div class="span4">
  <img class="marketing-img" src="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="assets/img/bs-docs-bootstrap-features.png">
  <h2>Packed with features.</h2>
  <p>A 12-column responsive <a href="css.html#grid-system">grid</a>, dozens of components, <a href="javascript.html">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="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에 반응형으로 퍼블리싱하는 작업이 쉽지는 않네요...

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

부트스트랩3.x 용 레이아웃 퍼블리싱_06(네이버xe레이아웃을위한)  (0) 2017.06.02
부트스트랩3.x 용 레이아웃 퍼블리싱_05(네이버xe레이아웃을위한)  (0) 2017.06.01
부트스트랩3.x 용 레이아웃 퍼블리싱_03(네이버xe레이아웃을위한)  (0) 2017.05.30
부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한)  (0) 2017.05.29
부트스트랩3.x 용 레이아웃 퍼블리싱_01(네이버xe레이아웃을위한)  (0) 2017.05.28

관련글 더보기

댓글 영역

티스토리툴바