웹마스터 팁
여러 개의 메뉴를 달아보자!
2007.08.23 20:07
빨갛게 표시된 부분만 잘 보시면 됩니다. 나머지는 잡설입니다.
제로보드 사이트를 잘 살펴보면 두 종류의 메뉴가 사용된 것을 알 수 있습니다. 방문자에게 컨텐츠를 제공하는 상단과 우측의 메뉴 한 종류와 홈페이지 운영과 관계된 내용을 연결하는 하단의 메뉴 한 종류 해서 두 가지 메뉴가 사용되고 있습니다.
이 팁에서는 이와같이 두 종류 이상의 메뉴를 생성하고 연결하는 방법을 기본 레이아웃인 xe_official과 제로보드 사이트를 예를 들어 소개하겠습니다.
보통 레이아웃과 메뉴를 연동하기 위해서는 다음의 과정을 거칩니다.
1. info.xml 에서 메뉴에 대한 변수를 설정
2. 관리자 페이지에서 메뉴를 생성
3. 레이아웃 생성시에 메뉴와 변수를 연결시킴
4. layout.html에서 변수를 불러옴
1번과 4번은 레이아웃 제작자가 신경 쓸 부분이고 2번과 3번은 레이아웃 사용자가 신경 써야 할 부분이죠.
0. 메뉴 구상
- 아래와 같이 제로보드 홈페이지 상단 및 좌측에 나타나는 컨텐츠와 연결되는 main menu 와
하단에 나타나는 사이트 운영과 관계된 bottom menu 로 메뉴로 구성할 예정입니다.
1. info.xml에서 메뉴 변수 설정
레이아웃을 만들 때 conf폴더에 있는 info.xml은 보통 별로 신경을 쓰지 않습니다. 하지만 이 파일에서
레이아웃에 필요한 여러가지 확장변수를 설정할 수 있으므로 잘 사용한다면 매우 유용할 것입니다.
여기서 우리가 다루게 될 메뉴 부분은 info.xml 파일내에 <menus>... </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>
하위 메뉴를 포함하는 한 개의 메뉴집단(또는 덩어리?)은 <menu name="...">...</menu> 부분과 일대일 대응됩니다.
우리는 상단 및 우측 메뉴 와 하단 메뉴 이렇게 두 개의 메뉴를 사용 할 것이므로 <menu> 태그가 두 개 필요합니다.
더 많은 종류의 메뉴를 사용할 것이라면 여기에서 <menu> 부분을 그 만큼 더 정의해주면 됩니다.
menu태그의 name 속성은 중요합니다. 나중에 layout에서 불러 쓸 이름이 되므로 고유하게 붙여줘야 합니다.
(<menu> 태그의 name은 layout.html에서 사용될 변수명이라고 생각하시면 됩니다.)
default="true" 는 정확히 무슨 뜻인지 모르겠습니다만, 여기서는 있으나 없으나 별 차이 없을거 같은 생각이 듭니다.
<title>은 관리자페이지에서 레이아웃 생성시에 메뉴 항목에 표시되는 제목입니다.
레이아웃을 쓰는 사람이 알기 쉽게 하는 것이 좋겠네요.
<title> 부분 바로 아래에 <description xml:lang="ko">설명</description> 을 추가하여 제목에 설명서를 달아도 될거 같은데
해보지 않아서 정확하지 않습니다.
<maxdepth>3</maxdepth>는 메뉴의 단계(깊이?) 입니다. 즉 3단계까지의 메뉴를 만들거라는 이야기입니다.
2. 관리자 페이지에서 메뉴 생성하기
메뉴 생성하는 방법은 다들 아실거라고 생각되므로 따로 설명드리지 않겠습니다.
다만 '0.메뉴구상' 에서 보신 것같이 main, bottom 두 개의 메뉴를 만들어 주면 됩니다.
이 때 메뉴 이름은 위의 name에서 정한 것과 일치하지 않아도 됩니다. 자신이 알기쉽게 붙여주면 됩니다.
3. 레이아웃 생성시에 메뉴와 변수를 연길시키기
관리자페이지에서 레이아웃을 생성하면 위와같은 설정화면이 나옵니다. 위 설정화면의 내용은 info.xml에 따라서
달라집니다. 위 그림의 표시된 부분이 info.xml에서 정의한 변수와 생성시킨 메뉴를 각각 연결시켜주는 모습입니다.
"상단 메뉴"는 info.xml의 title에서 정의해준 것이고 그 아래 괄호에 있는 main_menu는 <menu>태그의 name임을
쉽게 알 수 있습니다. 그 옆에 나온 것은 메뉴관리에서 만들어준 메뉴의 이름입니다. 이름을 똑같이 만들었더니
연결하기가 편합니다. <menu>태그를 더 많이 만든다면 "하단 메뉴" 아래로 그 내용이 더 나올 것입니다.
4. layout.html 에서 메뉴 불러다 쓰기
기본 레이아웃인 xe_official의 layout.html중간에 다음과 같은 부분이 있습니다.
위의 코드가 바로 info.xml에서 지정한 name을 이용해서 레이아웃 생성시에 연결시킨 메뉴를 불러오는 것입니다.
이제는 붉게 표시된 것이 name에서 정한 이름임을 말하지 않아도 아실 겁니다.
그리고 layout.html 마지막 부분에는 아래와 같은 코드가 있습니다.
보시다시피 $main_menu 와 $bottom_menu는 생성시킨 메뉴와 연결되는 열쇠가 됩니다.
다른 반복제어문을 쓰더라도 이것들만 있으면 얼마든지 메뉴를 가져다가 쓸 수 있습니다.
지금까지가 메뉴를 가져오는 방법에 대한 설명이었습니다.
"어디다가 어떻게 붙일 것인가"라는 것은 디자인을 어떻게 하고 반복-제어문을 어떻게 다룰 것인가의 문제입니다.
주~욱 길게 쓰긴 했는데 속을 들여다보니 별 내용 없네요..ㅠㅠ
다만 누구에게라도 도움이 되었으면 합니다.
댓글 5
-
비나무
2007.08.23 21:18
-
고라리
2007.08.24 07:47
추천 감사드리며 도움이 되었다니 기쁩니다. ^^
벌써부터 겨울을 계획하시다니 부지런하십니다.
그 열기에 저도 공부해야겠다는 생각이 드네요~ ^^ -
정낙훈(xynex)
2007.08.25 02:54
http://spring.zeroboard.com/proposal/320044
main_menu, bottom_menu 외에 더 메뉴를 만들려면 변수명이라고 하나요? 그걸 어떻게 입력하면 되나요 -
고라리
2007.08.25 07:10
마음대로 붙여줄 수 있습니다. layout.html에서 붙여준 name으로 불러온다는 것만 기억하면 됩니다.
-
규민
2008.08.30 17:42
오우!! 정말 감사합니다~
제목 | 글쓴이 | 날짜 |
---|---|---|
홈페이지 접속 속도에 미치는 에드온. [2] | jih449 | 2009.03.27 |
폰트가 작아져요 [2] | 황소111 | 2009.04.17 |
상단메뉴 개수를 지정한 만큼만 보여주고자 할 경우 [9] | 똑디 | 2007.08.23 |
여러 개의 메뉴를 달아보자! [5] | 고라리 | 2007.08.23 |
위지웍에디터가 갑자기 작동을 안할때 | 팔공산 | 2007.08.23 |
확장변수 [2] | 다케루 | 2007.08.25 |
플래쉬 화일을 헤더와 푸터에 넣어보기 [11] | choi2007 | 2007.08.27 |
분류(카테고리) 색상 지정하기. [12] | 송암 | 2007.08.27 |
올블로그에서 제로보드가 깨질때.. [1] | 스컬리지금어디야 | 2007.08.27 |
썸네일 크기 줄이는 법 [6] | 느까끼 | 2007.08.27 |
최신댓글에 닉네임 출력하기... [5] | 똑디 | 2007.08.28 |
플래시메뉴 사입방법 [4] | urhow1 | 2007.08.29 |
페이지수정 안되시는 분들께 드리는 팁 [2] | 다케루 | 2007.08.30 |
구글광고넣기....(재밌는경험담 본문에 광고 넣으시려는분 꼭 읽어 보세요...) [2] | kangho | 2007.08.30 |
(최근글목록) 분류명 표시하기 & 이미지 [7] | Simulz | 2007.08.31 |
서버이전하고 마이그레이션하고 경험담 [3] | 팔공산 | 2007.08.31 |
(0.1.2) 이모티콘 삽입 후 그림 안보일 때 [5] | Simulz | 2007.09.02 |
랜덤 배경 이미지 [7] | Simulz | 2007.09.04 |
회원에게는 구글 애드센스 보이지 않게 하기 [2] | 스컬리지금어디야 | 2007.09.05 |
확장변수 이용해서 2차 3차 분류 항목 만들기 [3] | VagaBond | 2007.09.08 |
메뉴 출력방식을 이해하는데 정말 큰 도움이 되었습니다.
이 부분을 이용하면 정말 다양한 레이아웃도 가능하리라 생각이 되네요...
추천드립니다.
웹프로그래밍을 진작에 공부를 좀 할 걸 하는 생각을 많이 하게 되네요...
지난번 메뉴별 css적용 문제(http://www.zeroboard.com/5286048)도 간단한 함수 하나만 추가함으로써 조절이 가능하다는 것을 알고 참 허탈했었습니다.
이번 겨울방학의 목표를 대충 정한 듯 합니다.
여름방학은 웹표준과 CSS 공부하느라 시간을 다 보내어 버렸으니,
겨울방학은 기본적인 웹프로그래밍을 공부해봐야 겠습니다..