고정 헤더 영역
상세 컨텐츠
본문
네이버xe는 지난 포스트에서 1가지만 정리하고 마무리 짓도록 합니다.
<!-- 바디 시작 --> [실제퍼블리싱 영역] <!-- 바디 끝 -->
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
이곳을 반응형 웹퍼블리싱으로 만들기 위해 부트스트랩3 프레임웍을 사용할 예정 입니다.
bootstrap2 와 bootstrap3 는 많이 변경이 되어서, 호환이 되지 않습니다.
XE레이아웃을 bootstrap3로 구성하기 전에 사전 지식을 쌓도록 하겠습니다.
http://martian36.tistory.com/1134 (참조사이트)
### XE를 위한 퍼블리싱작업시 기본 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]-->
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="Site RSS" href="http://timespace12.dothome.co.kr/xe/rss" /><link rel="alternate" type="application/atom+xml" title="Site Atom" href="http://timespace12.dothome.co.kr/xe/atom" /><!-- ICON -->
<link rel="shortcut icon" href="./modules/admin/tpl/img/faviconSample.png" /><link rel="apple-touch-icon" href="./modules/admin/tpl/img/mobiconSample.png" />
</head>
<body>
<!-- ================== 메인/서브 공통부분 끝 ==================== -->
<!-- 바디 시작 -->
<!-- 컨테이너 시작 -->
<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>
<!-- 푸터 끝 -->
<!-- 바디 끝 -->
<!-- ================== 메인/서브 공통부분 시작 ==================== -->
<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>
<!-- 게시판 리스트페이지 시작 -->
<include target="_header.html" />
<div class="list">
<form action="./" method="get" class="list-body">
<div class="list-container">
<ul><li>반복내용</li></ul>
</div>
</form>
<div class="fbox list-foot">
<form action="./" method="get" class="pagination">
<ul><li>페이징번호</li></ul>
</form>
</div>
<div class="list_footer">
<div class="btnArea"><a class="btn">버튼</a></div>
</div>
</div>
<include target="_footer.html" />
<!-- 게시판 리스트페이지 끝 -->
<!-- 게시판 뷰페이지 시작 -->
<div class="board_read">
<div class="read_header">제목,글쓴이,조회 수,추천 수,날짜</div>
<div class="exOut">사용자 추가항목</div>
<div class="read_body">게시물 본문</div>
<div class="read_footer">첨부파일,버튼</div>
</div>
<include target="_trackback.html" />
<include target="_comment.html" />
<!-- 게시판 뷰페이지 끝 -->
<!-- 게시판 쓰기페이지 시작 -->
<include target="_header.html" />
<form action="./" method="post" class="board_write">
<div class="write_header">옵션항목</div>
<div class="exForm">사용자 추가항목</div>
<div class="write_editor">입력에디터폼</div>
<div class="write_footer">글쓴이정보입력창+쓰기버튼</div>
</form>
<include target="_footer.html" />
<!-- 게시판 쓰기페이지 끝 -->
'PHP(Class)' 카테고리의 다른 글
| 부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한) (0) | 2017.05.29 |
|---|---|
| 부트스트랩3.x 용 레이아웃 퍼블리싱_01(네이버xe레이아웃을위한) (0) | 2017.05.28 |
| 네이버XE(제로보드xe) XE템플릿 코드로 게시판 수정 (0) | 2017.05.23 |
| 네이버XE(제로보드xe) XE템플릿 코드로 레이아웃 수정 (0) | 2017.05.22 |
| 네이버XE로 홈페이지 리뉴얼 실무 (0) | 2017.05.21 |
댓글 영역