소개

이번 강좌에서는 디자인 시안을 적용한 Umbraco의 좌측 메뉴 부분인 서브 메뉴와 사이트 맵 패스(Bread crumb) 기능을 추가하는 방법에 대한 설명입니다.

 

따라하기

1. 아래 그림은 29회차 강좌까지의 Skin3 페이지를 실행한 결과입니다. 상단에 메뉴가 정상적으로 적용되어 출력됨을 확인할 수 있습니다. 이번 강좌에서는 아래 2개의 영역인 서브 메뉴 영역과 Message 영역에 사이트 맵 패스를 출력하는 기능을 꾸며 보도록 하겠습니다.

062611_1603_30HTML1.png

 

2. [Skin3] 문서 타입 하위로 [Skin3] 문서 타입을 사용하도록 [자식노드 타입 허용] 옵션을 줍니다.

062611_1603_30HTML2.png

 

3. [Skin3] 콘텐트 페이지 하위로 Sub1과 Sub2로 2개의 새로운 페이지를 생성합니다. 이 때 [선택 문서 유형은] 반드시 [Skin3] 문서 타입으로 설정합니다.

062611_1603_30HTML3.png

 

4. 아래 그림과 같이 [Skin3] 페이지 하위로 [Sub1]과 [Sub2] 만들어진 모습입니다. 내용은 간단하게 입력합니다.

062611_1603_30HTML4.png

5. [Skin3] 템플릿을 열고 왼쪽 메뉴의 타이틀 하단에 아래 그림과 같이 [Umbraco 매크로]를 사용하여 2nd Level Navigation을 삽입합니다.

062611_1603_30HTML5.png

위 코드의 일부는 아래와 같습니다.

    <div id="aside-first" class="aside-first group">

        <div id="ub_main_comm">

          <div class="comm_menu">

            <h1><umbraco:Item field="leftTitle" recursive="true" runat="server"></umbraco:Item></h1>

 

<umbraco:Macro Alias="umb2ndLevelNavigation" runat="server"></umbraco:Macro>

 

            <p><img src="../Styles/images/@banner1.jpg"></p>

            <p><img src="../Styles/images/@banner2.jpg"></p>

          </div>

        </div>

    </div>

 

6. 웹 브라우저를 열고 [Skin3], [Sub1], [Sub2] 페이지를 실행시켜보면 아래와 같이 3개 페이지 공통으로 서브 메뉴가 출력됩니다.

062611_1603_30HTML6.png

 

7. 이번에는 디자인 시안 중 [messages] 영역에 아래 그림과 같이 또 다른 매크로인 [Bread Crumb]를 추가합니다.

062611_1603_30HTML7.png

위에서 사용한 코드의 일부는 아래와 같습니다.

        <div id="messages">

 

<umbraco:Macro Alias="BreadcrumbNav" runat="server"></umbraco:Macro>

 

        </div>

 

8. 사이트 맵 패스 기능을 추가한 후의 실행 모습입니다. [Skin3], [Sub1], [Sub2] 페이지 모두 해당 위치가 정상적으로 Message 영역에 출력됨을 확인할 수 있습니다. 여기까지의 단계를 거치면서 상단 메뉴와 왼쪽의 서브 메뉴 그리고 콘텐트 상단에 현재의 위치를 보여주는 사이트 맵 패스 기능까지 모두 구현을 해 보았습니다.

062611_1603_30HTML8.png

 

 

마무리

앞선 강좌들에서 다루었던 [문서 타입], [템플릿], [페이지] 등을 만들고 [템플릿]에 [Umbraco 페이지 필드] 및 [Umbraco 매크로] 기능을 사용하여 HTML 영역에 새로운 기능을 삽입하는 과정을 거치다 보니 어느덧 조금씩 생동감 있는 사이트로 변경되는 듯 합니다.

제가 따로 다뤄드리지 않겠지만, 더 많은 페이지 필드와 매크로 등의 기능을 사용하면 만들려고 하는 어떤 사이트가 되었든지 모두 Umbraco CMS로 충분히 구현할 수 있으리라 봅니다.

수많은 사이트가 Umbraco CMS로 구축된 이유가 이런 여러 가지 장점을 모두 갖추어서 그렇지 않을까 합니다.

 

끝.

 




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영