고정 헤더 영역
상세 컨텐츠
본문
원래는 포토샵 시안을 가지고 작업을 해야 하지만, 부트스트랩3.x로 처음 적용하는 상태라
일단 아래 처럼 작업 하려고 합니다.
0. 시안: http://timespace12.dothome.co.kr/bootstrap3/docs/
1. 퍼블리싱 작업: http://timespace12.dothome.co.kr/publish/
2. 네이버XE용 레이아웃으로 변경: layout.html
퍼블리싱 기본 작업은 부트스트랩3 프레임웍사용을 위한 HTML코드에 API추가로 시작 합니다.(http://timespace12.dothome.co.kr/publish/ 아래폴더에서 assets 폴더에 bootstrap3 API가 들어 갑니다.)
#아래는 index.html 내용 입니다.
<!-- 바디 시작 [실제퍼블리싱 영역] 바디 끝 -->
<!--
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
-->
<!-- ================== 메인/서브 공통부분 시작 ==================== -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- META -->
<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="container">
<!-- 헤더 시작 -->
<div class="header">
<h1>퍼블리싱 Site Logo</h1>
<nav class="gnb">
메뉴출력용 XE코드
</nav>
</div>
<div class="visual main">
메인/서브 퍼블리싱에 따라서 css클래스명 변경 visual main / visual sub
</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>
<!-- 본문 끝 -->
</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 관련 끝 -->
<!-- 바디 끝 -->
<!-- ================== 메인/서브 공통부분 시작 ==================== -->
<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 용 레이아웃 퍼블리싱_03(네이버xe레이아웃을위한) (0) | 2017.05.30 |
|---|---|
| 부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한) (0) | 2017.05.29 |
| 네이버XE HTML기본 구조 및 부트스트랩3.x 기본지식 (0) | 2017.05.28 |
| 네이버XE(제로보드xe) XE템플릿 코드로 게시판 수정 (0) | 2017.05.23 |
| 네이버XE(제로보드xe) XE템플릿 코드로 레이아웃 수정 (0) | 2017.05.22 |
댓글 영역