웹마스터 팁

빨갛게 표시된 부분만 잘 보시면 됩니다. 나머지는 잡설입니다.

제로보드 사이트를 잘 살펴보면 두 종류의 메뉴가 사용된 것을 알 수 있습니다. 방문자에게 컨텐츠를 제공하는 상단과 우측의 메뉴 한 종류와 홈페이지 운영과 관계된 내용을 연결하는 하단의 메뉴 한 종류 해서 두 가지 메뉴가 사용되고 있습니다.
이 팁에서는 이와같이 두 종류 이상의 메뉴를 생성하고 연결하는 방법을 기본 레이아웃인 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>로 구분되어 있습니다.

    <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중간에 다음과 같은 부분이 있습니다.

<!--@foreach($main_menu->list as $key => $val)-->

위의 코드가 바로 info.xml에서 지정한 name을 이용해서 레이아웃 생성시에 연결시킨 메뉴를 불러오는 것입니다.
이제는 붉게 표시된 것이 name에서 정한 이름임을 말하지 않아도 아실 겁니다.
그리고 layout.html 마지막 부분에는 아래와 같은 코드가 있습니다.

<!--@foreach($bottom_menu->list as $key => $val)-->

보시다시피 $main_menu 와 $bottom_menu는 생성시킨 메뉴와 연결되는 열쇠가 됩니다.
다른 반복제어문을 쓰더라도 이것들만 있으면 얼마든지 메뉴를 가져다가 쓸 수 있습니다.

지금까지가 메뉴를 가져오는 방법에 대한 설명이었습니다.
 "어디다가 어떻게 붙일 것인가"라는 것은 디자인을 어떻게 하고 반복-제어문을 어떻게 다룰 것인가의 문제입니다.

주~욱 길게 쓰긴 했는데 속을 들여다보니 별 내용 없네요..ㅠㅠ
다만 누구에게라도 도움이 되었으면 합니다.

제목 글쓴이 날짜
게시글 상하단에 광고삽입하기 veplay2 2018.03.08
css팁 : 웹폰트 저장소 Dotcomsoft 2018.01.17
css 팁 : 색상코드 검색이필요할때 Dotcomsoft 2018.01.17
XE에 채팅 연동 하기 [1] younggyo 2017.12.15
bitnami ssl 클라우드플레어 설정법 키큰아이 2017.12.06
성공적인 홈페이지 제작을 위해 점검해야 될 사안 웹369 2017.12.05
모바일앱, 모바일 어플에서 카카오톡, 카카오 스토리 앱으로 공유하기 한꼬마 2017.10.31
폰갭 모바일 사진 분석 부터 번역까지 아토피뉴스 2017.10.16
글등록시 포인트차감으로 등록불가 설정시 개별설정이 아닌 전체 설정 기준으로만 사용할 경우는 적용 안 되는 버그 수정법 sejin7940 2017.08.23
폰갭 자기 전화번호 추출 한꼬마 2017.08.14
폰갭 버전 업데이트 후 push 안되시는 분들께.. 한꼬마 2017.08.09
스케치북 갤러리 제목에 카테고리 추가하기. [1] 보보2 2017.07.17
포인트 적립 횟수 일별 제한하기 (게시글 및 댓글 작성시) Redback 2017.06.18
SASS? CSS확장판 키큰아이 2017.05.09
사용자정의에서 URL형, email형, textarea 형등에서도 기본값 인식하게 하려면 sejin7940 2017.04.25
비밀글에 대해서도 썸네일이미지는 출력되도록 하고 싶으면 sejin7940 2017.04.12
다음 우편번호 5자리 적용 [1] file 뒤늦게입문 2017.03.15
반응형 기본 개념 Ansi™ 2017.02.27
통합검색의 기본값을 '제목' 이 아니라 '제목+내용' 으로 하고 픈 경우 [2] sejin7940 2017.02.24
jquery swiper Ansi™ 2017.02.16