소개

이번 강좌에서는 Umbraco에 디자인 템플릿을 적용하는 두 번째 시간입니다. 상단 메뉴를 고정 텍스트가 아닌 Umbraco의 페이지의 메뉴 값이 출력되도록 설정해 보도록 하겠습니다.

 

따라하기

1. 지난 시간까지 작성한 소스를 실행시켰을 때, 아래 그림과 같이 메뉴는 동적으로 HTML로 설정된 값이 출력됩니다.

062611_1523_29HTML1.png

 

2. Umbraco [백오피스]로 돌아와서 [Skin3] 템플릿을 열고 아래 메뉴 영역을 찾습니다. 이곳의 메뉴를 Umbraco에서 만들어진 페이지의 제목 리스트로 출력되도록 설정하면 됩니다.

062611_1523_29HTML2.png

 

3. 아래 그림과 같이 Umbraco 매크로 중 아무거나 하나를 메뉴 li 태그 아래에 등록합니다. 다음 단계에서 나오는 소스를 그대로 사용해도 무관합니다.

062611_1523_29HTML3.png

 

4. 아래 코드는 Umbraco 템플릿에 Umbraco 매크로 중 Razor 문법을 사용할 수 있는 구문으로 묶고 이곳에서 상단 메뉴를 출력하는 코드를 입력한 소스입니다.

062611_1523_29HTML4.png

위 소스는 아래와 같습니다.

<div id="navigation">

<div id="layout-navigation" class="group">

    <div id="gnb_menu">

        <ul>

           <li><a href="/" >Home</a></li>

 

 

<umbraco:Macro  runat="server" language="cshtml">

    @foreach(var page in Model.AncestorOrSelf(1).Children) {

        <li><a href="@page.Url">@page.Name</a></li>

    }

</umbraco:Macro>

 

 

        </ul>         

    </div>

</div>

</div>

 

5. 위에서 메뉴를 출력하는 코드를 템플릿에서 작성 후 [Skin3] 페이지를 웹 브라우저로 실행한 결과값은 아래 그림과 같습니다. Home 메뉴를 제외한 전체적인 메뉴가 정상적으로 출력됨을 알 수 있습니다. 여기서 메뉴의 디자인이라던가 위치 등의 정보는 이제 Skin3에서 사용되는 Site.css를 편집해서 사용하면 됩니다.

062611_1523_29HTML5.png

 

6. 웹 브라우저의 소스 보기 메뉴를 사용하여 소스 보기를 하면 아래처럼 Umbraco 템플릿에서 지정한 Razor 구문이 있던 자리에 li 태그 리스트가 출력되어 메뉴 리스트가 출력됨을 확인할 수 있습니다.

062611_1523_29HTML6.png

 

 

마무리

웹 개발 환경 중 어떠한 솔루션도 모든 이들의 입맛에 맞는 솔루션은 없습니다. 이는 상용이던 오픈소스던 상관없이 말입니다. 다만, 대부분의 CMS 솔루션은 기본 베이스는 제공해주고 그 위에 올라가는 모든 기능 및 UI는 해당 솔루션을 사용하는 개발자 및 디자이너에게 그 일을 위임합니다.

아쉽지만, 독자분들이 원하는 수준의 UI를 개발하려면, 그에 상응하는 노력은 필수적으로 따라 와야 할 듯 합니다.

Umbraco, Orchard, DotNetNuke 등의 성공적인 오픈소스들과 함께 독자들의 노력을 더해간다면 훌륭한 솔루션으로 자리잡음 할 듯 합니다.

저도 그런 노력을 하는 사람 중의 한 사람으로 Umbraco 사용에 대한 전파에 힘쓰도록 하겠습니다. 파이팅 입니다!

 

 

끝.

 




관련글



관련 동영상 참고 자료

  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) 사이트 운영