흠..이제 info.xml을 만들었으니..거의다 끝났다라고 보시면 된다..ㅡ/.,ㅡ;;

제 기억엔 layout.html을 먼저 만들고 시안을 만들고 info.xml을 만들고 끝을 내는걸로 아는데..
저는 layou.html에서 기본 시안을 만들어 놓고 info.xml을 만들고 info.xml에 들어가는 설정들을 다시 layou.html에서 수정하는 방향으로 제작하기 땜시로 그렇게 진행하는 겁니다잉 ㅋㅋ

자 우선 내 시안을 보면..괜히 쪽팔리지만 ㅡ/.,ㅡ;;


대충이렇다..ㅡ/.,ㅡ;;
GNB는 우측에 위치해있다.
뭔가 비추고 공감각적인 느낌을 주기 위해서 어쩔 수 없이 효과를 넣었는데..그에 합당한 스크립을 찾지 못함으로써..
고냥 어쩔수 없이..웹표준을 포기하고 플래시를 넣었다..ㅡ/.,ㅡ;;
이건 디자이너로서 프라이드 ㅡ/.,ㅡ?ㅋㅋㅋㅋ켁 ㅋㅋㅋㅋㅋㅋ여튼 그냥 귀찮아서...
로고와 네비를 한방에 플래시로 만들어 버렸다.

그리고 컨텐츠 부분과 좌측 SNB부분을 주었고.
카피부분도 하단에 넣었다.

이게 레이아웃의 전부이다.

간결하다..ㅋㅋㅋㅋ

시안을 보면 알겠지만..나는 좌측에 있는 서브 메뉴만 레이아웃에서 설정하길 바란다.
그리고 가운데 부분에는 XE 컨텐츠가 출력될수있도록 하는게 최종 목표이다.

위의 레이아웃 구조를 대충 소스로 보겠다.


끝이다.
layout.html은 html, head, body는 생략한다.
그러므로 위의 코드가 전부이다.

저렇게 한다고해도 {$content}부분에 xe컨텐츠가 잘 출력된다.

하지만..홈페이지의 기능을 하기 위해선 이용자가 메뉴를 눌러서 원하는 정보를 찾을 수 있도록 안내하는게 완성품이 아닐까?

그러므로 핵심인..XE skin의 핵심인 메뉴 치환자 넣기이다!!!!!!!

퍼런색으로 된 메뉴 list부분을 XE관리자에서 미리 등록한 메뉴를 출력할 수 있도록 코드를 바꿔야 한다.
자..그럼 기본적으로 제공하는 official 레이아웃 스킨에서 뜯어 와보자 ㅋㅋ


서브 메뉴 list부분에 저렇게 XE치환자를 넣어주면 된다.
공식사이트에서 치환자를 제대로 본적도 없고, 보기도 싫고, 외우기도 싫고, 알고 싶지도 않아서..나도 뜻은 잘 모른다.;;;
다만 하나의 공통점이라면 <!--@ 시작한다면   <!--@end--> 이렇게 끝난다는거?ㅋㅋ
그리고 foreach가 핵심적인 역활을 하는 치환자인거 같다 ㅡㅡ;;

위의 내용을 풀어보면..
<!--@foreach($sub_menu->list as $key => $val)--> // info.xml에서 <menus>안의 sub_menu를 지정

<!--@if($val['selected']&&$val['url']==$mid)-->{@$_menu_depth=1}{@$selected_menu=$val}<!--@end-->
// 만약 이번 메뉴를 누르면 ............흠 모르겠다.....ㅡ/,.ㅡ;; menu_depth는..메뉴 계층..즉 몇단 메뉴 지정인거 같다;;;

<li class="{$_colorset_list[$_idx]} <!--@if($val['selected'])-->selected<!--@end-->">
// li class="style <- 을 지정해주는 컬러셋에 맞춘다고 하는거 같다..나는 없으므로 고냥 style을 지정하겠다.
그래서 나는 그냥 <li>로 마무리 ㅋㅋ

<a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a></li>
// 만약 오픈윈도우면 예 ㅡㅡ?;;머래;; 여튼 이부분은 sub_menu에 지정된 메뉴들의 링크와 대체 텍스트 표시등을 나타내는 치환자들인거 같다. 그래서 이건 그냥 냅둔다;;;

foreach부분은 프로그래밍에 대한 사전지식이 없다면..나 처럼 애매모호해 보일것이다;;
여튼 위에 처럼 하면 메뉴 부분에 치환자 삽입은 끝이다 ㅡ/.,ㅡㅋㅋ

위의 것을 응용해서 info.xml에서 미리 main_menu로 이름을 지정을 했다면. foreach 부분엔
<!--@foreach($main_menu->list as $key => $val)-->
위의 것을 응용해서 info.xml에서 미리 site_menu로 지정을 했다면. foreach 부분엔
<!--@foreach($site_menu->list as $key => $val)-->

위의 처럼 바꿔주고 아래는 똑같이 반복 삽입하면 끝나는거 같다 ㅋㅋㅋ

noo9ya.com은 통으로 로고와 GNB부분을 만들어 버렸기 때문에 로고와 메인메뉴를 생략했지만..
로고와 같은 이미지 삽입하는 예제를 한번 살짝 발가락만 담궈보자~

그래서 일부로 copy 부분을 이미지를 넣는다는 코딩을 하였는데..자 살펴보자.
<div id="copy"><img src="./images/noo9ya_copyright.jpg" /></div>
<div id="copy">라는 div 안에다가 <img(noo9ya_copyright.jpg)>를 넣는다는 코드다.

하지만 우리는 전에 info.xml안에 분명 아래와 같은 네이밍을 지정해주었다.

이렇게 지정해준 이유는 XE관리자 화면에서 레이아웃 설정에서 쉽게 이미지를 등록하고 뺄수 있도록 사전 작업을 해둔것이다. 이미지를 넣었다, 뺏다하려면 미리 위치를 지정해줘야 하는데, 이 위치를 layout.html에서 지정해주는 것이다.
나는 copy부분을 한번 지정해보겠다.

layout.html 기존 코드

layout.html 수정 코드
끝..ㅡ/.,ㅡ;;

간단히 뜯어 보자면 우리는 /conf/info.xml 파일안에 사전에 이름지정(네이밍)을 한 속성을 걸어주는 것뿐이다.
레이아웃 info안에 들어있는 logo_image 네이밍을 가져왔을뿐이다.

그럼 사전에 등록한 저 속성의 링크를 항상 logo_image 이름을 가진 속성의 경로로 링크를 걸고 싶다하면?

저허게 하면 땡이다 ㅡ/.,ㅡ;;;;

그럼 info.xml안에 다른 여러가지 속성을 추가해줘서 layout.html에 넣어주면 땡인것이다..ㅡ/.,ㅡ;;
이미지나 배너, 로고 등등은


위 처럼 추가해주면 땡이다..ㅡ/.,ㅡ;;

응용을 해서 메뉴는 extra_vars가 아닌 menus에 추가 하면 될듯하다 ㅋㅋ


위의 것을 응용해서 info.xml에서 미리 main_menu로 이름을 지정을 했다면. foreach 부분엔
<!--@foreach($main_menu->list as $key => $val)-->
요렇게 시작하면 땡ㅋㅋㅋ

자자 그럼 응용부분은 끝나고.....
제일 처음에 CSS와 JS링크 부분을 알아봤으니 이젠 위에 info.xml에 있는 이름까지 다 넣어서 최종 수정한 layout.html파일을
만들어 보면 나는 아래와 같이 완성 된다.

<!--// import layout css file -->
<!--%import("./css/layout.css")-->
<!--%import("./js/fl.js")-->
<!--%import("./js/fi.js")-->

<div id="wrap">
<!-- wrap 시작 -->
<div id="right">
<!-- 우측 레이아웃 시작 -->
        <script type="text/javascript">
            <!--
              gnb('./images/gnb.swf','210','370','#000','Main_Menu','sameDomain','');
            //-->
        </script>
<!-- //우측 레이아웃 끝 -->
</div>

<div id="content_wrap">
<!-- 내용 시작 -->
<div class="content">
<!-- start -->

{$content}

<!-- //end -->
    </div>
<!-- //내용 끝 -->
</div>

<div id="left">
<!-- 좌측 레이아웃 시작 -->
<br />
<br />
        <h1><img src="./images/subtitle_about.jpg" /></h1>
        <ul>
                {@$_idx = 0}
                <!--@foreach($sub_menu->list as $key => $val)-->
                <!--@if($val['selected']&&$val['url']==$mid)-->{@$_menu_depth=1}{@$selected_menu=$val}<!--@end-->
                <!--@if($val['link'])-->
                <li <!--@if($val['selected'])-->selected<!--@end-->"><a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a></li>
                {@$_idx++}
                <!--@end-->
                <!--@end-->
        </ul>
<!-- //좌측 레이아웃 끝 -->
</div>
    <br clear="all" />
<div id="copy"><img src="{$layout_info->logo_image}" /></div>
<!-- //warp 끝 -->
</div>

layout.html 완성 -/ㅁ-;;ㅋㅋㅋㅋㅋ
두꺼운 글씨 표시가 XE 레이아웃 스킨을 위한 소스 코드를 변경한 부분입니다. ㅋㅋㅋ
여튼 다음 시간에 업로드~!!ㅋㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.