오늘은 메뉴를 설정하고 활용하는 방법에 대해 올립니다.
미리 말씀드리는데 많이 빈약합니다;
들어가기 전에.. ( if 문을 아시면 건너뛰세요 )
내용 보기... 닫기
혹시나 해서 if문에 대한 간단한 예제 하나 들어보고 가겠습니다.
<!--@if($layout_info->title)-->홈타이틀이 등록 되어 있습니다.<!--@end-->
무슨 뜻일까요. $layout_info->title 의 내용이 있으면 "홈타이틀이 등록 되어 있습니다." 라는 문구가 출력됩니다.
<!--@if(!$layout_info->title)-->홈타이틀이 등록 되어 있지 않습니다.<!--@end-->
$layout_info->title 의 내용이 없으면 "홈타이틀이 등록 되어 있지 않습니다." 라는 문구가 출력됩니다.
하나로 합쳐 볼까요?
<!--@if($layout_info->title)-->
홈타이틀이 등록 되어 있습니다.
홈타이틀은 "{$layout_info->title}" 입니다.
<!--@else-->
홈타이틀이 등록 되어 있지 않습니다.
<!--@end-->
하나 더 예를 들겠습니다.
{@ $a = "10" }
{@ $b = "5" }
$a = {$a}
$b = {$b}
$a + $b = {$a + $b}
$a - $b = {$a - $b}
$a * $b = {$a * $b}
$a / $b = {$a / $b}
<!--@if($a > $b)-->
{@ $c = $a - $b }
$a가 $b보다 {$c} 만큼 큽니다.
<!--@elseif($a == $b)-->
$a와 $b는 같습니다.
<!--@else-->
{@ $c = $b - $a }
$b가 $a보다 {$c} 만큼 큽니다.
<!--@end-->
여기까지 하고 이제 메뉴를 다뤄 보도록 하겠습니다. 직접 작성해 보시면 쉽습니다.
zbxe 레이아웃에서 메뉴 사용 절차.
(1) chochobo 레이아웃의 info.xml 에서 사용할 메뉴의 정보을 작성.
(2) chochobo 레이아웃관리페이지에서 미리 구성된 메뉴를 연결.
(3) layout.html 에서 등록한 메뉴를 불러온 후, 입맛(?)에 맞게 수정하여 사용.
위 세 단계만 거치면 됩니다. 차례대로 자세히 알아보죠.
(1) chochobo 레이아웃의 info.xml 에서 사용할 메뉴의 정보을 작성합니다.
zbxe/chochobo/conf/info.xml 파일을 열어 밑 부분을 보시면,
<menus>
<menu name="main_menu" default="true">
<title xml:lang="ko">메인 메뉴</title>
<maxdepth>3</maxdepth>
</menu>
</menus>
위 부분이 있습니다. <extra_vars>와 </extra_vars> 사이에 내용물 리스트 추가 했던거 기억 나시죠?
메뉴도 <menus>와 </menus> 사이에 비슷한 방식으로 추가 작성하면 됩니다.
대충 살펴 볼까요?
name은 영문으로 작성하시되 다른 <menu>의 name과 중복되면 안됩니다. 이 name을 이용해 메뉴를 불러와야 하니까요.
default=true 는 레이아웃에 사용할 기본메뉴라는 것을 말하는 것이고요, 기본메뉴는 하나면 되겠죠?
maxdepth 는 레이아웃에서 지원하는 메뉴의 최대 단계(depth)를 말합니다.
홈 (1단계메뉴)
커뮤니티 (2단계뉴)
자유게시판 (3단계메뉴)
질답게시판 (3단계메뉴)
이런 메뉴가 있다면 depth가 3 입니다.
가령, depth가 1인 하단 메뉴(name: bottom_menu)를 추가한다면 아래와 같이 작성 하시면 됩니다.
<menus>
<menu name="main_menu" default="true">
<title xml:lang="ko">메인 메뉴</title>
<maxdepth>3</maxdepth>
</menu>
<menu name="bottom_menu">
<title xml:lang="ko">하단 메뉴</title>
<maxdepth>1</maxdepth>
</menu>
</menus>
이렇듯 메뉴의 수가 많으면 레이아웃 작성하는데 손은 고생하겠지만 레이아웃에서 사용할 수 있는 메뉴의 수는 제한이 없다고 할 수 있습니다.
(2) chochobo 레이아웃관리페이지에서 미리 구성된 메뉴를 연결.
info.xml에서 지정한 name 을 가진 메뉴에 연결할 메뉴를 선택하시고 저장 하세요.
여기까지면 기본적인 설정은 끝이고 layout.html에서 불러와서 사용하는 것만 남았습니다.
(3) layout.html 에서 등록한 메뉴를 불러온 후, 입맛(?)에 맞게 수정하여 사용.
메뉴를 구성하는 부분에 대한 설명 부분인데 내용이 많이 빈약합니다.
(4)로 바로 가셔서 몇 개의 메뉴 타입 중 필요한 것만 복사-붙이기 신공으로 이용하셔도 되겠습니다.
먼저 우리가 info.xml 에서 등록한 main_menu 라는 name 을 가진 메뉴를 불러오도록 하겠습니다.
우선 가장 기본적인 형태의 1단계 메뉴를 불러오는 공식입니다.
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<a href="{$val['href']}">{$val['text']}</a>
<!--@end--><!--@end-->
일단, foreach 문은 배열값을 가진 변수를 이용한 반복문인데요(정확할라나;;;;) 가장 중요한 것은 빨간 글씨 부분입니다. info.xml에서 지정해줬던 name 값을 그대로 적어 주셔야 합니다. 그리고 foreach도 if와 같이, 쓸 때는 꼭 <!--@end-->로 끝을 알려줘야 합니다. 두 사항만 조심하시고
나머지 메뉴의 사용과 관련해 여러분들이 주로 이용할 부분은 흰색 바탕의 많이 보던 태그 부분 입니다.
위 공식 3 줄만 작성하면
예전에는 아래처럼 손수 작성해야할
메인메뉴를 구성하는 모든 메뉴의 정보와 링크가 자동으로 생성 됩니다.
<a href="http://chochobo.com/zbxe/">홈</a>
<a href="http://chochobo.com/zbxe/notice">공지사항</a>
<a href="http://chochobo.com/zbxe/freeboard">자유게시판</a>
편리하죠? 메뉴의 수가 많아질수록 그 위력을 발휘할 것입니다.
공식에서 info.xml 에서 작성한 다른 name 으로만 바꾼다면 해당되는 메뉴의 리스트가 출력됩니다.
메뉴를 다루는데 있어 여러분이 알아두면 유용한 변수가 몇 가지 있습니다.
$val['node_srl'] : 메뉴의 노드 시리얼 (자신이 속한 상위메뉴를 지정할 때 사용할 수 있다. 트리메뉴 응용 및 적용시 유용하다.)
$val['text'] : 메뉴의 이름 (ex. 자유게시판)
$val['href'] : 메뉴의 경로 (ex. http://chochobo.com/zbxe/mid=freeboard)
$val['url'] : 메뉴의 mid 값 (ex. freeboard)
$val['seleted'] : 사용자에 의해 선택된(클릭된) 메뉴인가를 알수 있게 해준다.
$val['expand'] : 메뉴 "펼침" 옵션이 체크된 상태인가. 펼침 체크 됐으면 Y , 아니면 N 값을 갖으며 N 가 기본값.
$val['open_window'] : 메뉴 "새창 열기" 옵션이 체크된 상태인가. 새창 열기 체크 됐으면 Y , 아니면 N 값을 갖으며 N 가 기본값.
$val['normal_btn'] : 해당 메뉴의 일반 이미지 경로.
$val['hover_btn'] : 해당 메뉴의 마우스오버 이미지 경로.
$val['active_btn'] : 해당 메뉴의 선택시 이미지 경로.
참고. 현재 zbxe는 아직 자체적으로 이미지메뉴기능을 제공하고 있지는 않습니다. 하지만 레이아웃 제작자가 지원할 수는 있습니다. 시간이 된다면 이미지메뉴 지원하는 메뉴 부분을 구성해보도록 하겠습니다.
이 정도만 둘러보기로 하구요, 메뉴를 좀 더 알아보고 싶은 분은 아래 내용보기을 클릭하고 보세요. 초초보님들 천천히 읽어보시고 이해안되면 그냥 스킵하세요. 어차피 메뉴 부분은 css 조금만 알면 복사-붙이기 신공으로 얼마든지 커버 가능합니다.
더 보기... 닫기
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<a href="{$val['href']}">{$val['text']}</a>
<!--@end--><!--@end-->
1) 위 기본 공식에 앞 시간에 링크를 통해 소개했던 리스트를 표현하는 태그인 <ul>, <li> 태그만 추가하면
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}">{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
위와 같이 변형됩니다. 메뉴도 일종의 리스트니 ul li 태그를 이용해서 묶습니다. 각각의 li 에 background 나 a 속성을 지정해줄 수 있어 얼마든지 변화무쌍한 활용이 가능합니다.
2) <!--@if($val['selected'])-->class="on"<!--@end--> 무슨 뜻일까요? 만약 이 메뉴를 선택한다면(클릭한다면) class 이름이 on 인 스타일을 적용하라는 뜻입니다. chobo.css 파일에서 on 클래스의 스타일을 지정 해주면 됩니다. 그래서
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}">{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
이렇게 바뀝니다. 메뉴를 선택해도 메뉴 모양을 바꾸고 싶지 않을 때는 사용하지 않는 부분 입니다.
3) <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end--> 무슨 뜻일까요? 만약 새창 열기 값이 Y (freeboard 메뉴 작성시 새창 열기에 체크 했으면) 이면 새창으로 여는 스크립트를 출력하라는 것입니다. 이것도 적용해보면,
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
4) 지금 메인메뉴는 1단계 밖에 없는데, 2단계, 3단계 메뉴를 추가로 넣으면 어떻게 불러 오나요?
일단, 단순화 시켜서 예를 들겠습니다.
1차메뉴 :
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
{@ $menu_1st = $val }
<li><a href="{$val['href']}">{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
2차 메뉴 :
<ul>
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
{@ $menu_2nd = $val }
<li><a href="{$val['href']}">{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
3차 메뉴 :
<ul>
<!--@foreach($menu_2nd['list'] as $key => $val)--><!--@if($val['text'])-->
{@ $menu_3rd = $val }
<li><a href="{$val['href']}">{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
이제 공식이 보이죠? 여기까지 해서 메뉴가 출력되는 부분에 대해서 대충 이해하도록 하구요, 아래 여러가지 메뉴 타입을 참고로 잘 활용하시기 바랍니다.
(4) 여러 가지 메뉴 타입 제시.
info.xml 에 name 이 "main_menu" 인 3단계로 구성된 메뉴를 기준으로 작성합니다.
1) 1단계 타입 : 제로보드 홈페이지의 하단 메뉴처럼 1단계 메뉴만 사용하실 때 쓰시면 됩니다.
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
2) 1단계 - 2,3 단계 타입1 : 제로보드의 메인메뉴에 쓰이는 메뉴 형태 입니다. 2차 메뉴를 선택해야 3차 메뉴가 나오죠.
<!-- main_menu 1차 시작 -->
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->{@ $menu_1st = $val }<!--@end-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
<!-- main_menu 2차 시작 -->
<!--@if($menu_1st)-->
<ul>
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['selected'])-->
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
<li><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li>
<!--@end--><!--@end-->
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
3) 1단계 - 2,3단계 타입2 : 제로보드의 메인메뉴에 쓰이는 메뉴 형태지만 2차 메뉴 선택에 상관 없이 3차 메뉴가 모두 출력됩니다.
<!-- main_menu 1차 시작 -->
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->{@ $menu_1st = $val }<!--@end-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
<!-- main_menu 2차 시작 -->
<!--@if($menu_1st)-->
<ul>
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['list'])-->
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
<li><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li>
<!--@end--><!--@end-->
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
4) 1,2 단계 - 3단계 타입 : 1,2단계는 먼저 보여주고, 2단계 메뉴를 선택하면 선택한 2단계 메뉴에 속한 3단계 메뉴를 따로 보여줍니다.
<!-- main_menu 1차 시작 -->
<ul>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
<!-- main_menu 2차 시작 -->
<!--@if($val['list'])-->
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
<!--@if($v['selected'])-->
{@ $menu_2nd = $v }
<!--@end-->
<li><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li>
<!--@end--><!--@end-->
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!-- main_menu 3차 시작 -->
<!--@if($menu_2nd)-->
<ul>
<!--@foreach($menu_2nd['list'] as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
5) 1,2,3 단계 타입 : 모든 메뉴리스트를 순서대로 출력합니다. 트리메뉴를 만드는데 유용한 타입 입니다.
<ul>
<!-- 1단계 메뉴 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
<!-- 2단계 메뉴 시작 -->
<!--@foreach($val['list'] as $ke => $va)--><!--@if($va['text'])-->
<li><a href="{$va['href']}" <!--@if($va['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$va['text']}</a>
<!-- 3단계 메뉴 시작 -->
<!--@foreach($va['list'] as $k => $v)--><!--@if($v['text'])-->
<li><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li>
<!--@end--><!--@end-->
</li>
<!--@end--><!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
또 어떤 형태가 더 있을까요? 올려주시면 작성해 넣도록 하겠습니다.
보기에 복잡하지만, 여러분들이 손댈 것은
1. 1단계 메뉴에 info.xml 에서 지정한 메뉴의 name 을 정확히 기재하는 것과
2. 각 타입의 회색 바탕의 3줄 정도의 내용을 활용하는 것입니다.
이번에는 조금이라도 쉽게 설명 드리기가 너무 어렵네요. ㅠㅠ
초초보레이아웃의 메뉴를 3단계까지 구성하시고 위의 몇가지 타입의 코드들을 layout.html에 복사-붙이기 하신 후 잘나오나 직접 확인해 보세요. 미리보기 클릭
다음 시간에는 본문 불러오는 방법과 가장 기본적인 레이아웃 하나 예시하고 팁 게시를 마치도록 하겠습니다.
기본적인 레이아웃을 보면 메뉴에 대해 감이 더 올거라 생각합니다.
RECENT COMMENT