[Umbraco 강좌] 31. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀

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

소개

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

따라하기

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

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

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

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

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

<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 제목] 식으로 왼쪽 상단에 서브 타이틀이 정상적으로 출력됩니다.

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

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

위 동작의 결과값으로 만들어지는 템플릿 코드의 일부는 아래와 같습니다.

<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] 페이지에서 정의한 서브 타이틀이 적용되어서 출력되는 모습을 보여줍니다.

마무리

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

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

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

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

끝.

관련글

• 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를 원격 서버에서 실행