[Umbraco 강좌] 19. 기본 매크로(Macros) 사용하기

아티클
07/07/2011

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

소개

Umbraco에서의 매크로(Macros)는 웹 페이지 내에서 실행되는 하나의 작은 프로그램 단위를 말합니다. 이는 기본적으로 ASP.NET의 User Control로 구성되고, 기타 . .NET 사용자 지정 컨트롤 또는 XSLT Template 등이 사용됩니다.

따라하기 : Umbraco 제공 기본 매크로 사용하기

Step 1: 문서 타입 생성

1. [MacroTest]란 이름의 문서 타입을 하나 생성합니다.

2. [MacroTest] 문서 타입의 [Tabs] 속성에서 [Content] 탭을 하나 생성합니다.

3. [MacroTest] 문서 타입의 [Generic properties] 탭에서 [Body Text] 이름으로 속성을 하나 추가합니다.

Step 2: [MacroTest] 템플릿 편집하기

1. [MacroTest] 템플릿으로 이동하여 [Umbraco 페이지 필드 삽입] 아이콘을 클릭합니다.

2. [Umbraco 페이지 필드 삽입] 화면에서 bodyText 별칭(Alias)을 갖는 필드를 추가합니다.

3. 아래 그림은 [MacroTest] 템플릿에 [bodyText] 필드가 추가된 상태입니다.

Step 3: 페이지 생성하기

1. 앞서 생성한 [MacroTest] 문서 타입을 [Simple website] 하위로 두고자 할 때에는 아래 그림과 같이 [Homepage] 문서 타입의 [Structure] 탭에서 [MacroTest] 문서 타입을 [자식 노드 타입 허용] 옵션에서 반드시 체크합니다.

2. [Simple website]에 마우스 오른쪽 버튼을 클릭하여 아래 그림과 같이 페이지를 하나 생성합니다.

3. 페이지의 간단히 입력한 후 [저장] 후 [미리보기] 아이콘을 클릭하여 웹 브라우저로 출력합니다.

4. 현재까지의 완성된 페이지의 모습입니다.

Step 4: 기본 제공 Umbraco 매크로 사용하기

1. [MacroTest] 템플릿으로 이동하여 아래 그림과 같이 [Umbraco Macro 삽입] 아이콘을 클릭하여 [bodyText] 상단에 [Top Navigation]을 삽입합니다.

2. 1번 순서와 동일하게 [bodyText] 아래에 [2^nd Level Navigation] 매크로를 삽입합니다.

3. 아래 그림과 같이 [MacroTest] 템플릿을 구성한 후 [저장] 아이콘을 클릭하여 템플릿을 최종 완성합니다.

Step 5: 서브 페이지 만들기

1. [MacroTest] 문서 타입 하위로 [MacroTest] 문서 타입을 두고자한다면, 아래 그림과 같이 [MacroTest] 문서 타입의 [Structure] 탭에서 [MacroTest] 문서 타입을 선택합니다.

2. 아래와 같이 [매크로 삽입] 페이지의 하위로 [하위페이지] 란 이름의 페이지를 생성합니다.

3. 생성된 [하위 페이지] 페이지의 내용을 편집 후 [저장 후 발행] 아이콘 및 [미리 보기] 아이콘을 클릭하여 웹 브라우저로 출력합니다.

4. 현재까지의 절차에 의해서 완성된 [매크로삽입.aspx] 페이지의 모습입니다. 상단과 하단에 [Umbraco 매크로] 기능에 의해서 메뉴와 서브메뉴가 출력됨을 알 수 있습니다.

마무리

기본으로 제공되는 매크로는 간단하게 2개의 기능만 제공하지만, 사용자가 직접 만들어서 입력하는 매크로는 상당히 많이 존재합니다. 다음 시간부터는 특정 기능을 단위로 수행할 수 있는 사용자 지정 매크로를 만들어서 사용하는 방법에 대해서 학습하도록 하겠습니다.

끝.

관련글

다음을 통해 공유

[Umbraco 강좌] 19. 기본 매크로(Macros) 사용하기

추가 리소스