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

소개

이번 강좌에서는 탑 메뉴와 서브 메뉴간에 왼쪽 영역 상단에 동일한 타이틀을 보여주고자 할 때 사용하는 서브 타이틀을 입력하는 기능에 대한 소개입니다.

따라하기

1. 현재까지 디자인 시안 페이지를 바탕으로 아래 3개의 기능을 구현을 하였습니다. 상단 메뉴, 서브 메뉴, 사이트 맵 패스 기능이 그것인데요. 이번에는 아래 화살표로 표시되는 부분에 대한 타이틀이 동적으로 페이지 별로 변경되도록 설정해보도록 하겠습니다.

062611_1639_31HTML1.png

2. [Skin3] 문서 타입은 현재는 메인 콘텐트 영역에 데이터가 출력될 하나의 속성만을 가지고 있습니다. 이곳에 서브 타이틀을 입력할 수 있도록 하나의 속성을 더 추가하도록 하겠습니다. 아래 그림과 같이 [Left Title]이란 이름으로 속성을 하나 더 추가하도록 하겠습니다.

062611_1639_31HTML2.png

3. [Left Title] 속성이 추가된 [Skin3] 문서 타입을 사용하는 [Skin3] 페이지를 보면 하단에 [Left Title]을 입력하는 텍스트박스가 하나 더 나타납니다. 이곳에 적당한 서브 타이틀을 입력하면 됩니다.

062611_1639_31HTML3.png

4. 서브 타이틀이 출력될 위치를 잡고 이곳에 [Umbraco 페이지 필드]인 [leftTitle]을 추가합니다.

062611_1639_31HTML4.png

위에서 사용된 소스의 일부분은 아래와 같습니다.

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

<div id="ub_main_comm">

<div class="comm_menu">

<h1><umbraco:Item field="leftTitle" 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>

5. [Skin3] 페이지를 웹 브라우저로 실행하면 아래 그림처럼 [Skin 3 제목] 식으로 왼쪽 상단에 서브 타이틀이 정상적으로 출력됩니다.

062611_1639_31HTML5.png

6. 단, 여기서 [Sub1]과 [Sub2] 페이지를 실행하면 [Left Title] 속성을 입력하지 않아서 아래 그림과 같이 부모에 정의된 [Left Title] 속성이 상속되지 않습니다. 만약, 자식 메뉴에서 속성을 입력하지 않았을 때에는 부모 메뉴에서 정의된 속성값이 출력되고자 한다면 그 때에는 [Umbraco 페이지 필드] 삽입 시 [Recursive] 속성을 체크하며 됩니다.

062611_1639_31HTML6.png

7. 아래 그림은 [Left Title] 속성을 부여할 때 옵션으로 [Recursive] 체크박스를 체크하는 모습을 나타냅니다.

062611_1639_31HTML7.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>

8. 아래 그림은 최종적으로 웹 브라우저로 [Skin3], [Sub1], [Sub2] 페이지를 모두 테스트하고, 각각의 페이지 모두 부모 페이지인 [Skin3] 페이지에서 정의한 서브 타이틀이 적용되어서 출력되는 모습을 보여줍니다.

062611_1639_31HTML8.png

마무리

자~자~자~자~자~… 여기까지입니다.

지금까지 지난 31회에 걸쳐서 일반적으로 Umbraco에서 사용되는 전반적인 기능을 모두 설명한 듯 합니다.

아쉽지만, 기본적인 기능은 여기까지 설명 드리도록 하겠습니다.

다음 시간에는 현재까지 만든 내용을 실제 도메인에서 실행될 수 있도록 원격 서버에서 실행하는 모습을 보여드리도록 하겠습니다.

끝.

관련글