3. 레이아웃 스킨

392293 3. 레이아웃 스킨 392227 2009-02-13T14:24:45Z http://zbxe.springnote.com/pages/392293 2007-07-31T03:24:20Z <div id="toc" style="BORDER-RIGHT: tan 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: tan 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; BORDER-LEFT: tan 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: tan 1px solid; BACKGROUND-COLOR: #fffffa;">목차 <hr /> <ol> <li><a href="#toc_0" title="toc_0" class="external">XE의 레이아웃과 제로보드4의 헤더/푸터</a></li> <li><a href="#toc_1" title="toc_1" class="external">레이아웃 만들기</a></li> <li><a href="#toc_2" title="toc_2" class="external">파일 정리</a></li> <li><a href="#toc_3" title="toc_3" class="external">링크</a></li> </ol> </div> XE에서는 사이트의 메뉴와 디자인을 레이아웃 기능을 통해서 쉽게 적용할 수 있습니다. 레이아웃은 메뉴 모듈과 위젯등을 이용해서 홈페이지, 블로그등 다양한 형태로 사이트를 운영할 수 있게 합니다.   <h3>XE의 레이아웃과 제로보드4의 헤더/푸터<a href="#toc_0" title="toc_0" class="anchor" id="toc_0" >#</a></h3> 제로보드4에서 사이트의 디자인을 위해 사용되던 헤더/푸터 파일의 사용은 일괄적인 관리를 할 수 없고 그 내용에 따라 잘못된 결과물을 출력할 수 있던 방법이였습니다. html 규격에 어긋나는 등의 좋지 않은 결과가 생겨나기도 하였구요. 반면에 XE의 레이아웃은 게시판의 스킨처럼 손쉽게 적용할 수 있고 제로보드4의 헤더/푸터 기능에 비해서 더 강력하고 쉽게 제작할 수 있습니다. 또한 공유(배포)하기에 더욱더 편리한 형태를 가지게 되었습니다. <ul> <li>zb4 레이아웃 <img title="zb4layout.png" class="attachment" src="/pages/392293/attachments/312417" alt="zb4layout.png" /></li> </ul>   <ul> <li> 제로보드XE 레이아웃<img title="lyt.gif" class="attachment" src="/pages/392293/attachments/358668" alt="lyt.gif" style="FLOAT: right; MARGIN: 0px 0px 0px 1em;" /> ↓ layout.html <ol class="code"> <li>(헤더 내용)... {$content} (푸터 내용)...</li> </ol> </li> </ul> 이와같이 헤더와 푸터 파일을 각각 만들필요없이 layout.html 파일 하나로 간단히 레이아웃을 제작할 수 있습니다.         <h3>레이아웃 만들기<a href="#toc_1" title="toc_1" class="anchor" id="toc_1" >#</a></h3> <ol> <li>먼저 원하는데로 body부분의 레이아웃을 작성합니다. body 외의 html태그나 head는 XE가 알아서 처리합니다. 따라서 <body></body>태그 사이에 들어갈 부분만 작업하면 됩니다. 또한 이때 컨텐츠, 통합검색, 로그인위젯, 메뉴, 언어선택 등이 차지할 공간을 미리 알맞게 비워두고 제작합니다.</li> <li> css와 js파일 삽입방법 레이아웃 파일 가장 처음부분에 아래와 같은 방법으로 삽입합니다. <ol class="code"> <li> </li> </ol> 보시는 것처럼 js파일과 css파일 삽입방법은 같습니다. 컬러셋을 여러개로 제작하실 경우엔 조건문을 사용하여 각 컬러셋마다 다른 파일을 삽입하실 수 있습니다. <ol class="code"> <li>                  </li> </ol> 위와 같이 조건문을 사용하여 여러 컬러셋에 대해 서로다른 css파일을 삽입할 수 있습니다. 컬러셋은 info.xml에서 extra_vars로 사용자로부터 입력받을수 있게 하시고 조건문에 관한 자세한 설명은 <a href="/pages/392287" title="스킨 문법" class="wiki">스킨 문법</a>을 참고하세요. </li> <li>이제 컨텐츠, 로그인위젯, 메뉴, 언어선택 등을 넣어봅시다. 이 매뉴얼에선 XE 공식사이트 스킨(xe_official)에 쓰인 것들만 설명합니다.</li> <li> <ul> <li>컨텐츠 부분 게시판, 페이지 등이 나타날 부분으로, 꼭 넣어주셔야 합니다. 간단히 {$content} 를 넣으면 됩니다.</li> <li> 언어선택 부분 언어 선택 버튼이 나타날 부분입니다. <ol class="code"> <li><ul>                     <li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>            </ul></li> </ol> 기본적으로 위와같이 넣으시면 됩니다. 꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다. (언어선택을 원치않으실 경우엔 아예 넣지 않으셔도 됩니다.) </li> <li> 1차 메뉴 부분 1차 메뉴가 나타날 부분으로, 꼭 넣어주셔야 합니다. 먼저 info.xml에서 extra_vars에서 메뉴를 받아야합니다. 그후에 레이아웃의 원하는 부분에 아래와 같은 코드를 넣어주시면 됩니다. <ol class="code"> <li><ul>                                  {@ $menu_1st = $val }                    <li class="on">             <a href="{$val['href']}" onclick="window.open(this.href);return false;">{$val['text']}</a>          </li>            </ul></li> </ol> 언어선택 부분과 마찬가지로 꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다.   </li> <li> 통합검색 부분 통합검색 폼과 검색버튼이 나타날 부분입니다. <ol class="code"> <li><form action="{getUrl()}" method="post" id="isSearch">             <input type="hidden" name="mid" value="{$mid}" />             <input type="hidden" name="act" value="IS" />             <input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />             <label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">{$lang->title}</label>             <ul id="selectOrder">                 <li>                     <input type="radio" name="search_target" value="title" id="search_target1" />                     <label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}</label>                 </li>                 <li>                     <input type="radio" name="search_target" value="content" id="search_target2" />                     <label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>                 </li>                 <li>                     <input type="radio" name="search_target" value="title_content" id="search_target3" />                     <label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>                 </li>                 <li>                     <input type="radio" name="search_target" value="comment" id="search_target4" />                     <label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>                 </li>                 <li>                     <input type="radio" name="search_target" value="tag" id="search_target5" />                     <label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>                 </li>             </ul>             <input name="is_keyword" type="text" class="inputText" title="keyword" />             <input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />         </form></li> </ol> 마찬가지로 알맞게 스타일을 수정하셔도 무방합니다. </li> <li> 로그인위젯 배포가 목적이라면 로그인 위젯공간은 비워두시거나 기본 로그인스킨을 사용하시기 바랍니다. 이유는 만약 다른 사용자가 가지고있지 않은 로그인스킨 위젯 코드를 추가한다면 다른 사용자에게 혼란이 빚어질 것이기 때문입니다. XE 기본 로그인위젯 스킨(xe_official) 코드 (제로보드XE에 기본으로 포함되어 있습니다.) <ol class="code"> <li><img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" /></li> </ol> </li> <li> 이외에도 여러 extra_vars를 활용해 사용자정의로 설정할수있는 여러부분을 만드실 수 있습니다. 이로써 레이아웃 틀의 제작이 끝났습니다. </li> </ul> </li> <li> 레이아웃 설명달기 (info.xml) <ol class="code"> <li><?xml version="1.0" encoding="utf-8"?> <layout version="0.1">     <title xml:lang="ko">레이아웃 이름</title>     <author email_address="제작자 email" link="제작자 홈페이지 주소" date="작성일">         <name xml:lang="ko">제작자 이름</name>         <description xml:lang="ko">             레이아웃에 대한 간단한 설명         </description>     </author> </layout></li> </ol> 위와 같은 형식으로 간단히 작성하시면 됩니다. 레이아웃을 누가 만들었고 어떤 목적으로 만들었는지에 대한 내용을 info.xml 이라는 파일에 적어서 저장합니다. info.xml 파일로 레이아웃의 저작자가 누구인지 알릴 수 있고 차후에 자신이 볼때도 내역을 다시 확인할 수 있습니다. 더불어 확장변수/메뉴연결 등을 지정할 수 있습니다. <img title="layout_location.gif" class="attachment" src="http://leesnhyun.springnote.com/pages/392293/attachments/165961" alt="layout_location.gif" style="FLOAT: none; WIDTH: 391px; HEIGHT: 277px;" /> info.xml은 conf폴더 내에 넣어두시면 됩니다. </li> </ol>   <h3>파일 정리<a href="#toc_2" title="toc_2" class="anchor" id="toc_2" >#</a></h3> 레이아웃 이름으로 된 폴더를 만드신 후, <img title="layoutfolder.png" class="attachment" src="/pages/392293/attachments/312594" alt="layoutfolder.png" /> 위와 같이 layout.html, conf폴더와 이미지, js, css파일들을 넣으시면 됩니다.   <h3>링크<a href="#toc_3" title="toc_3" class="anchor" id="toc_3" >#</a></h3> <a href="http://www.zeroboard.com/?mid=skin_step3&search_target=user_id&search_keyword=wind6cpu" title="'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈" class="external">'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈</a>   http://blog.nzeo.com/ baragi 265