Partager via

[Umbraco 강좌] 29. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴

  • Article

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

소개

이번 강좌에서는 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 사용에 대한 전파에 힘쓰도록 하겠습니다. 파이팅 입니다!

끝.

관련글