소개

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

 

따라하기

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에서 사용되는 전반적인 기능을 모두 설명한 듯 합니다.

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

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

 

 

끝.

 




관련글



관련 동영상 참고 자료

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