어느 CMS나 마찬가지겠지만 부트스트랩을 해당 CMS에 적용할 경우 가장 복잡하고 어려운 부분이 내비게이션 메뉴입니다. 메뉴바라고도 하죠. 트위터 부트스트랩의 내비게이션 메뉴바는 각 요소에 정해진 클래스 선택자를 추가하면 메뉴를 클릭했을 때 서브 메뉴가 나타나는 구조입니다. 워드프레스의 경우도 마찬가지라서 내비게이션 메뉴가 함수에 의해 만들어지고 있기 때문에 부트스트랩의 선택자를 삽입하기 어려워서 Walker Nav이라는 별도의 프로그램을 만들어서 함수 파일에 추가하면 쉽게 부트스트랩의 메뉴 구조를 사용할 수 있습니다. 부트스트랩 관련 프로젝트의 자바스크립트를 추가하면 클릭하지 않고 마우스 오버 상태에서도 서브 메뉴가 나타나도록 할 수 있습니다. 우선 부트스트랩 기본 구조에 맞춰서 익스프레스 엔진의 메뉴 구조에 부트스트랩의 메뉴를 추가하고 아울러 3단 이상의 서브메뉴도 작동되도록 하는 방법을 알아보겠습니다. 익스프레스 엔진의 메뉴는 현재 2단 서브 메뉴만 지원하고 있죠. 이 글은 익스프레스 엔진 1.7 버전을 어느 정도 다뤄본 분을 대상으로 하고 있으니 자세한 설정은 생략합니다.
1. 트위터 부트스트랩의 내비게이션 메뉴바(Navbar)
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
트위터 부트스트랩 2.0버전의 메뉴바의 기본 구조는 위와 같습니다. 클래스 선택자로 .navbar, .navbar-inner가 있는 div이 사용되고 ul 태그에는 .nav 선택자가 사용됩니다. 서브 메뉴가 있을 경우는 다음과 같이 li 태그에 .dropdown이라는 선택자가 추가되고 서브 메뉴의 ul 태그에 .dropdown-menu 선택자가 추가됩니다.
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
서브 메뉴가 있는 메뉴를 클릭했을 때 자바스크립트에 의해 서브 메뉴가 나타나도록 하기 위해 a 태그에 data-toggle="dropdown"라는 데이터 속성을 사용하고 선택자로 .dropdown-toggle를 사용합니다. <b class="caret"></b>는 서브 메뉴가 있다는 표시로 작은 세모 아이콘이 추가돼 있습니다. 서브메뉴에 서브 메뉴가 있는 경우, 즉 2단의 메뉴는 다음과 같습니다.
<ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a href="#">More options</a> <ul class="dropdown-menu"> <li><a href="#">Second level link</a></li> <li><a href="#">Second level link</a></li> <li><a href="#">Second level link</a></li> <li><a href="#">Second level link</a></li> <li><a href="#">Second level link</a></li> </ul> </li> </ul>
2단의 li 태그에는 .dropdown-submenu라는 선택자가 추가돼있습니다. 다른 부분은 1단의 서브 메뉴와 같습니다.
2. 익스프레스 엔진의 메뉴 구조
익스프레스 엔진의 메뉴는 다음과 같이 1단의 서브 메뉴만 지원하는 것으로 돼있습니다(default 레이아웃 기준). 하지만 응용하면 2단, 3단의 서브 메뉴도 지원할 수 있습니다.
<nav class="gnb" id="gnb"> <ul> <li loop="$GNB->list=>$key1,$val1" class="active" |cond="$val1['selected']"> <a href="{$val1['href']}" target="_blank" |cond="$val1['open_window']=='Y'">{$val1['link']}</a> <ul cond="$val1['list']"> <li loop="$val1['list']=>$key2,$val2" class="active" |cond="$val2['selected']"><a href="{$val2['href']}" target="_blank" |cond="$val2['open_window']=='Y'">{$val2['link']}</a></li> </ul> </li> </ul> </nav>
워드프레스는 함수로 만들어지지만 익스프레스 엔진은 각 태그 안에 독특한 문법 구조로 메뉴를 만들고 있습니다. 여기서 loop는 메뉴가 여러개 있을 경우 반복하라는 문법이고 cond 부분은 조건문입니다. 조건문은 어떤 조건에 해당하면 어떤 명령을 실행하는 것입니다.
class="active" |cond="$val1['selected']"
위와같은 경우는 메뉴를 클릭(selected) 했을 때 | 앞의 명령을 실행하는 것입니다. 즉, .active라는 선택자를 li 태그에 삽입하는 것이죠. 평상시는 이 선택자가 없습니다.
target="_blank" |cond="$val1['open_window']=='Y'"
위의 경우는 메뉴 설정에서 "메뉴 클릭시 새 창으로 열기"에 체크했을 경우 target="_blank"라는 속성과 값을 태그에 삽입하라는 것입니다.
<ul cond="$val1['list']">
위와 같이 조건문만 있는 경우는 ul 태그 안의 내용 즉 li 태그를 출력합니다. 이 부분은 1단 서브 메뉴이므로 서브 메뉴가 없을 경우 출력하지 않습니다.
loop="$val1['list']=>$key2,$val2"
1단의 서브메뉴에도 위와 같은 문법이 있는데 이것도 주메뉴의 경우와 마찬가지로 1단의 서브 메뉴를 반복하라는 것입니다.
class="active" |cond="$val2['selected']"
위의 코드는 1단 서브 메뉴를 클릭했을 때 .active 선택자를 추가합니다.
{$val1['href']}"
위의 코드는 주메뉴의 url을 가져오는 변수이고 마찬가지로
{$val2['href']}
위의 코드는 1단 서브 메뉴의 url을 가져오는 변수입니다.
{$val1['link']}
{$val2['link']}
위의 변수는 각각 주메뉴의 메뉴 이름, 1단 서브 메뉴의 메뉴 이름을 가져오는 변수입니다.
익스프레스 엔진은 위와같은 조건문과 변수를 사용해서 메뉴 구조를 만들고 있으며 위처럼 간단한 구조이지만 변수를 사용하므로 수십 개의 메뉴라도 출력됩니다. 또한 변수 이름을 변경하고 2단의 서브 메뉴를 추가하면 이 또한 출력됩니다. 위의 내용을 이해하였다면 간단하게 만들 수 있습니다.
<nav class="gnb" id="gnb">
<ul>
<li loop="$GNB->list=>$key1,$val1" class="active" |cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank" |cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active" |cond="$val2['selected']"><a href="{$val2['href']}" target="_blank" |cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active" |cond="$val3['selected']"><a href="{$val3['href']}" target="_blank" |cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
1단의 ul 태그가 있는 서브 메뉴를 복사해서 위처럼 li 태그 안에 붙여넣고 각 숫자를 +1 해주면 됩니다. 2단의 서브 메뉴가 만들어졌습니다.
사이트 메뉴 편집에서 위 그림처럼 2단의 서브 메뉴를 만듭니다.
웹사이트 전면에서 새로고침하고 보면 2단의 메뉴가 나타납니다. 익스프레스 엔진의 기본 레이아웃은 서브 메뉴가 있는 경우 서브 메뉴의 배경이 전체가 짙은 회색으로 나타납니다. 이를 부트스트랩 라이브러리 파일들을 추가하고 부트스트랩의 메뉴구조로 변경해보겠습니다.
3. 익스프레스 엔진의 레이아웃에 부트스트랩 파일 및 폰트 어썸 폰트 아이콘 파일 추가하기
기본 레이아웃의 폴더를 복사해서 새로운 폴더(myskin)를 만들고 폰트 어썸 파일중 css 폴더와 font 폴더를 붙여넣습니다. 부트스트랩 파일 중 css파일을 css폴더에 복사해 붙여넣습니다. js 폴더를 만들고 부트스트랩 js파일을 붙여넣습니다. 기존에 있던 css와 js파일을 해당 폴더로 이동해줍니다. 슬라이드 이미지는 기존의 이미지가 폭이 작으니 넓은 이미지로 새로 만들어 넣었습니다. 이미지도 많아지면 새로운 폴더를 만들고 이동해줍니다. layout.css파일과 custom.js 파일은 스타일시트와 자바스크립트를 수정하기 위한 것으로 빈 파일을 만들어서 해당 폴더에 추가합니다.
4. 경로 수정
<load target="css/bootstrap.css" />
<load target="css/font-awesome.css" />
<load target="css/layout.css" />
<load target="css/default.layout.ie78.css" targetie="lt IE 9" />
<load target="css/default.layout.ie7.css" targetie="IE 7" />
<load target="css/default.layout.webfont.css" cond="$layout_info->WEB_FONT == 'YES'" />
<load target="../../common/js/respond.min.js" targetie="lt IE 9" />
<load target="js/bootstrap.js" type="body" />
<load target="js/custom.js" type="body" />
layout.html 파일을 열고 위처럼 경로를 수정해줍니다. 부트스트랩으로 전면 교체할 것이므로 기존에 사용하던 css 파일과 js 파일의 경로는 제거합니다. ie를 위한 css와 웹폰트 css 파일은 경로를 수정합니다. 웹폰트 링크에도 조건문이 있는데 이 조건문의 의미를 아실것입니다.
익스프레스 엔진의 특징은 레이아웃을 쉽게 만들기 위해서 익스프레스 엔진만의 독특한 태그를 만들어 사용하고 있습니다. load라는 태그는 XE에서만 사용할 수 있는 것으로 html의 link태그에 해당합니다. targetie도 마찬가지이고 웹브라우저가 ie일 경우 사용되는 조건 태그에 해당합니다. type="body"는 자바스크립트를 body 태그 안에 추가하라는 속성입니다. 이것이 없을 경우 head 태그에 추가됩니다. 여기까지 하고 저장한 다음 사이트 디자인 설정으로 가서 작업중인 레이아웃을 선택하고 각종 설정을 합니다.
사이트 디자인 설정에서 레이아웃을 선택하고 기본 레이아웃을 선택합니다. 제목을 myskin으로 바꿔주고 사용자 정의 에서 여러가지 설정을 한 다음 슬라이드 이미지를 추가합니다. 하단에서 저장 버튼을 클릭한 다음 PC 설정 저장 버튼을 클릭합니다.
사이트 전면에서 웹브라우저를 새로고침하면 위처럼 나타납니다. 아직 부트스트랩 레이아웃을 위한 선택자를 추가하지 않아서 모든 요소들이 위에서부터 차례로 나타납니다.
내용이 길어지니 다음 글로 이어집니다.
진행 중인 데모는 이곳을 참고하세요. --> http://kopress.co.kr
