[Umbraco 강좌] 30. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

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

따라하기

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

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

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

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

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

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

<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개 페이지 공통으로 서브 메뉴가 출력됩니다.

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

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

<div id="messages">

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

</div>

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

마무리

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

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

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

끝.

관련글

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