11 마스터페이지 마스터 페이지 들어가기 마스터 페이지 사용하기 2019-05-18 11 마스터 페이지 마스터 페이지 들어가기 마스터 페이지 사용하기

마스터 페이지 들어가기 마스터 페이지(master pages)란? 일반적으로 웹 사이트는 다음과 같이 상단 영역, 좌측 영역, 탐색 경로 영역, 하단 영역과 같이 웹 사이트를 이루는 공통 영역들이 정해진 위치에 놓여져 있으면서 각 페이지의 특화된 내용들만 바뀌는 것이 보통입니다.

마스터 페이지 들어가기

마스터 페이지 들어가기 위 그림에서는 상단 영역, 탐색 경로 영역, 하단 영역이 모든 웹 사이트에 공통적으로 따라다니는 영역이며 중간에 있는 내용만 각 페이지에 따라 바뀌게 됩니다. 이처럼 웹 사이트의 공통 영역과 공통 영역이 놓여져 있는 전체적인 큰 틀(레이아웃)을 정의하는 것이 바로 ASP.NET 2.0의 마스터 페이지 입니다. 다음은 위 그림과 같은 결과를 나오게 한 마스터 페이지를 VS 2005에서 본 그림입니다.

마스터 페이지 들어가기

마스터 페이지 들어가기 마스터 페이지가 나오게 된 배경 사실 ASP.NET 2.0이 나오기 전에도 웹 사이트의 공통 영역들을 효율적으로 처리하기 위한 다음과 같은 방법들이 있었습니다. 포함 파일은 주로 ASP 시절에 사용하던 방법으로서 웹 사이트의 공통 영역들을 하나의 물리적인 파일 형태로 분리해 놓고 필요한 부분에서 포함(include)시켜 사용하던 방법이었습니다. 물론 이 방법도 ASP.NET에서 사용가능 하지만 공통 영역들을 프로그래밍적으로 제어하기가 힘들고 포함 파일에서 잘못된 태그 하나가 전체 웹 사이트의 디자인에 영향을 줄 수 있다는 단점이 있으므로 ASP.NET에서는 거의 사용하지 않습니다. - 포함 파일(include file) - 사용자 정의 컨트롤(user controls)

마스터 페이지 들어가기 사용자 정의 컨트롤은 웹 사이트에서 공통적으로 사용되는 부분들을 하나의 모듈로 만들어 여러 페이지에서 끌어다 쓸 수 있도록 만든 컨트롤이며 이미 우리가 ‘7.5. 사용자 정의 컨트롤(user controls)’ 절에서 다루어 본 컨트롤입니다. ASP.NET 1.x에서는 공통 영역을 정의하기 위해 대부분 이 사용자 정의 컨트롤을 사용 했었습니다. 하지만 이 사용자 정의 컨트롤은 웹 사이트의 공통 영역 자체는 정의할 수 있지만 공통 영역들이 포함된 웹 사이트 전체의 틀(레이아웃)은 정의할 수 없었습니다. 그러므로 모든 웹 페이지(.aspx)는 웹 사이트 전체 틀을 정의하는 HTML 태그(보통 <table> 태그를 사용)를 중복적으로 가지고 있었으며 웹 사이트 전체 틀이 바뀔 경우 유연하게 대처할 수 없었습니다.

마스터 페이지 들어가기 이렇게 포함 파일과 사용자 정의 컨트롤의 단점을 보완하기 위해 나온 것이 바로 ASP.NET 2.0의 마스터 페이지입니다. [그림 11-2]를 보면 공통 영역과 공통 영역들이 웹 사이트에서 자리잡고 있는 위치(레이아웃)를 마스터 페이지에서 한번에 정의하고 있는 것을 볼 수 있습니다. 그러므로 개발자는 각 페이지를 만들 때 포함되어야 할 공통 영역에 대해 전혀 신경 쓰지 않아도 되며 웹 사이트 전체 디자인과 관련된 어떠한 변경 사항이 발생 하더라도 이 마스터 페이지를 수정하여 마스터 페이지를 사용하고 있는 모든 페이지(.aspx)에 일괄적으로 수정 사항을 적용 시킬 수 있는 것입니다. 그러므로 우리는 이 마스터 페이지를 통해 개발 생산성 향상 및 효율적인 유지보수를 기대할 수 있습니다.

마스터 페이지 들어가기 마스터 페이지의 구동 원리 마스터 페이지는 다음과 같은 구동 원리를 통해 웹 브라우저로 렌더링 됩니다.

마스터 페이지 들어가기 위의 그림에서 마스터 페이지(.master)에 정의된 공통 영역과 콘텐츠 페이지(.aspx)에 정의된 특화된 콘텐츠가 결합(바인딩)하여 하나의 결과 페이지(.aspx)로 서비스되는 것을 볼 수 있습니다. 여기서 콘텐츠 페이지는 마스터 페이지와 결합하는 .aspx 페이지를 말합니다. 또한 여기서 여러분이 한가지 알아두어야 할 것은 마스터 페이지는 단지 웹 사이트의 공통 요소 및 레이아웃을 정의하는 페이지이므로 단독으로 사용자에게 서비스될 수 없다는 것입니다. 즉, http://localhost/Chapter11/MasterPage.master와 같은 URL을 사용하여 마스터 페이지를 직접 요청할 수 없으며 반드시 마스터 페이지를 사용하는 콘텐츠 페이지(.aspx)를 요청해야 합니다.

마스터 페이지 들어가기 위의 그림을 좀더 구체적으로 그려보면 다음과 같습니다.

마스터 페이지 사용하기 기본적인 마스터 페이지 마스터 페이지와 콘텐츠 페이지를 생성하는 방법부터 알아 보겠습니다. 예제를 실행할 ‘C:\WebSites\Chapter11\’ 파일 시스템 웹 사이트를 만들고 다음의 [실습]을 따라 마스터 페이지와 콘텐츠 페이지를 생성해 봅시다. [실습] 마스터 페이지와 콘텐츠 페이지 생성하기

마스터 페이지 사용하기 [예제 11-1] 마스터 페이지 예제

마스터 페이지 사용하기 마스터 페이지에서 기본 콘텐츠 정의하기 예제 11-1에서는 다음과 같이 ContentPlaceHolder 컨트롤에 어떠한 내용도 정의하지 않았습니다. 하지만 다음과 같이 ContentPlaceHolder 컨트롤에 콘텐츠(내용)를 직접 작성하여 기본 콘텐츠를 정의할 수 있습니다. 이렇게 ContentPlaceHolder 컨트롤에 기본 콘텐츠를 정의하고 여기에 Content 컨트롤을 바인딩시키지 않으면 ContentPlaceHolder 컨트롤의 기본 콘텐츠가 그대로 렌더링됩니다. <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 이것은 마스터 페이지의 ContentPlaceHolder1에 정의한 기본 콘텐츠입니다. </asp:ContentPlaceHolder>

마스터 페이지 사용하기 [예제 11-2] 기본 콘텐츠 정의 예제

마스터 페이지 사용하기 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서 마스터 페이지도 .aspx 페이지(웹 폼)와 마찬가지로 여러 이벤트를 가지고 있습니다. 그리고 마스터 페이지가 콘텐츠 페이지(.aspx 페이지)와 결합 하여 동작하는 만큼 이 두 페이지의 이벤트 실행 순서를 이해하는 것은 매우 중요합니다. 그리고 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서는 뒤에서 공부할 “콘텐츠 페이지에서 마스터 페이지로의 접근 방법” 을 다룰 때 필요한 선행지식이기도 합니다. 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서를 알아보기 위한 가장 간단한 방법은 각 이벤트가 발생할 때 해당 이벤트 처리기에서 문자열을 출력해보는 것입니다. 그럼, 이와 관련된 예제를 작성해 봅시다.

마스터 페이지 사용하기 [예제 11-3] 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서 예제

마스터 페이지 사용하기 예제 11-3의 실행 결과 그림에서 우리가 캐치해야 할 부분은 바로 콘텐츠 페이지의 Load 이벤트가 마스터 페이지의 Load 이벤트보다 먼저 일어난다는 사실입니다. 그러므로 페이지 로드 시에 마스터 페이지의 Load 이벤트에서 초기화한 정보들을 콘텐츠 페이지에서 접근하려면 콘텐츠 페이지의 Load 이벤트가 아닌 콘텐츠 페이지의 LoadComplete 또는 PreRender 이벤트(마스터 페이지의 Load 이벤트 뒤에 발생하는 이벤트들) 등에서 접근해야 한다는 것을 알 수 있습니다.

마스터 페이지 사용하기 콘텐츠 페이지에서 마스터 페이지로 접근하기 페이지 로드 시 마스터 페이지에서 초기화된 서버 컨트롤을 콘텐츠 페이지에서 참조하고 콘텐츠 페이지의 Button 클릭 시 다시 마스터 페이지에 있는 서버 컨트롤을 참조하는 예제를 작성해 봅시다.

마스터 페이지 사용하기 [예제 11-4] 콘텐츠 페이지에서 마스터 페이지로의 접근 예제

마스터 페이지 사용하기 <Vitamin Quiz> 콘텐츠 페이지의 이벤트 실행 순서 예제 11-4에서 Ex04.aspx 파일의 6행을 제거하여 콘텐츠 페이지의 LoadComplete 이벤트 처리기를 다음과 같이 변경하고 <출력> 버튼을 클릭하면 그 결과는 어떻게 될까요? 예상 되는 결과와 그러한 결과가 나온 이유를 설명해 보세요. protected void Page_LoadComplete(object sender, EventArgs e) { Label tLabel = (Label)Master.FindControl("Label1"); Label1.Text = tLabel.Text; }

마스터 페이지 사용하기 중첩 마스터 페이지 이번에는 여러 개의 마스터 페이지를 중첩해서 사용하는 중첩 마스터 페이지에 대해 공부합니다. 중첩 마스터 페이지의 구동 원리는 다음과 같습니다.

마스터 페이지 사용하기 부모 마스터 페이지와 자식 마스터 페이지가 결합하여 새로운 결과 마스터 페이지를 생성하고 이렇게 만들어진 결과 마스터 페이지와 콘텐츠 페이지가 다시 결합하여 최종적인 결과 페이지를 생성합니다. 물론 중첩 마스터 페이지는 그 특성상 결과 마스터 페이지를 부모 마스터 페이지로 하고 다른 마스터 페이지를 자식 마스터 페이지로 하여 계속적으로 중첩할 수 있습니다. 중첩 마스터 페이지는 마스터 페이지 중에서도 공통된 부분을 뽑아내서 정의해야 할 때 유용하게 사용할 수 있습니다. 예를 들어 대규모 사이트에서 사이트의 전체적인 레이아웃은 부모 마스터 페이지에 정의하고 각 파트 별로 사용하는 마스터 페이지는 자식 마스터 페이지로 정의하면 체계적이고 효율적으로 사이트의 레이아웃을 잡을 수 있습니다.

마스터 페이지 사용하기 그럼, 세계로 뻗어 나가는 다국적 기업인 마데전자의 각 국가별 웹 사이트를 한 웹 응용 프로그램에서 관리한다고 가정하고 중첩 마스터 페이지를 사용해서 마데 전자의 각 국가별 웹 사이트를 구성해 보겠습니다. 그전에 Chapter11 파일 시스템 웹 사이트에 MasterMain.master, MasterKorea.master, MasterAmerica.master, Ex05.aspx(MasterKorea.master를 사용하는 콘텐츠 페이지), Ex05_1.aspx(MasterAmerica.master를 사용하는 콘텐츠 페이지) 파일을 추가합시다. 참고로 MasterMain.master는 MasterKorea.master와 MasterAmerica.master의 부모 마스터 페이지이지만 VS 2005에서는 중첩 마스터 페이지에 대한 디자인 인터페이스를 지원해 주지 않으므로 자식 마스터 페이지로 사용할 마스터 페이지의 @Master 지시문을 직접 수정하여 자식 마스터 페이지로 만들어야 합니다. 참고로 다음 그림과 같이 새 항목 추가 대화상자의 템플릿에서 ‘마스터 페이지’를 선택하더라도 마스터 페이지 선택 옵션이 비활성화되어 중첩 마스터 페이지를 만들 수 없습니다.

마스터 페이지 사용하기 아울러 한가지 더 덧붙이자면, 이와 같이 언어가 다른 다국적 웹 사이트는 지역화(localization)라는 기능을 통해 좀더 효율적으로 구현할 수 있으며 여기서는 단지, 중첩 마스터 페이지의 구조와 사용법을 설명하기 위해 다국적 웹 사이트를 예제로 선택했다는 것을 알아둡시다. 지역화는 ‘17장. 다국적 웹 사이트 만들기’ 에서 공부합니다.

마스터 페이지 사용하기 [예제 11-5] 중첩 마스터 페이지 예제

마스터 페이지 사용하기 마스터 페이지의 적용 범위 설정 웹 페이지 단위 웹 응용 프로그램 단위 마스터 페이지를 웹 페이지 단위로 적용하기 위해서는 @Page 지시문 또는 @Master 지시문의 MasterPageFile 특성에 해당 마스터 페이지의 경로를 지정하면 됩니다. 이것은 지금까지 우리가 사용해 왔던 범위 설정 방법입니다. 웹 응용 프로그램 단위 마스터 페이지를 응용 프로그램 단위로 적용하기 위해서는 다음과 같이 구성 파일에 <pages> 요소를 추가하고 이 요소의 masterPageFile 특성에 해당 마스터 페이지의 경로를 지정한 후,

마스터 페이지 사용하기 <configuration> <system.web> <pages masterPageFile="~/MasterPage.master" /> </system.web> </configuration> 콘텐츠 페이지의 @Page 지시문에 있는 MasterPageFile 특성을 다음과 같이 제거해주면 됩니다. <%@ Page Language="C#"%> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <b>웹 응용 프로그램 단위의 마스터 페이지를 사용하였습니다.</b> </asp:Content>

마스터 페이지 사용하기 <Exercise 11-1> 동적으로 마스터 페이지 연결 다음과 같은 두 개의 마스터 페이지가 존재할 때 [MasterPage1.master] … (생략) … <h3>MasterPage1.master</h3> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>

마스터 페이지 사용하기 다음 그림과 같이 <마스터 페이지1 사용> 버튼을 클릭하면 MasterPage1.master를 사용하고 <마스터 페이지2 사용> 버튼을 클릭하면 MasterPage2.master를 사용하는 콘텐츠 페이지를 구현해 봅시다. [MasterPage2.master] … (생략) … <h3>MasterPage2.master</h3> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>

마스터 페이지 사용하기 힌트 : 콘텐츠 페이지에서 사용할 마스터 페이지를 동적으로 연결하려면 Page 개체의 MasterPageFile 속성에 연결할 마스터 페이지의 경로를 지정하면 됩니다 (예 : Page.MasterPageFile = “~/MasterPage1.master”;).

이것만은 알고 갑시다 1. 각 문장에 어울리는 적절한 용어를 상자 안에서 골라 보세요. ContentPlaceHolder 마스터 페이지 @Master 지시문 콘텐츠 페이지 MasterPageFile ( )는 .master라는 확장자를 가지면서 전체 웹 사이트의 공통 영역 및 레이아웃을 정의하는 새로운 개념의 페이지 입니다. ( )는 마스터 페이지와 결합하는 .aspx 페이지입니다. 웹 폼(.aspx)에서는 @Page 지시문을 사용하여 웹 폼의 특성을 정의하는 반면, 마스터 페이지(.master)에서는 ( )을 사용하여 마스터 페이지의 특성을 정의합니다. Content 컨트롤에 정의된 콘텐츠(내용)는 마스터 페이지의 ( ) 컨트롤에 렌더링됩니다. 콘텐츠 페이지의 @Page 지시문에는 사용할 마스터 페이지의 경로를 지정하는 ( ) 특성을 반드시 포함해야 합니다.

이것만은 알고 갑시다 2. 다음은 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서를 위에서부터 아래로 기술한 것입니다. 빈칸에 들어갈 이벤트는 무엇입니까? 콘텐츠 페이지의 Init 이벤트 콘텐츠 페이지의 PreLoad 이벤트 ( ) 마스터 페이지의 Load 이벤트 마스터 페이지 또는 콘텐츠 페이지의 서버 컨트롤 이벤트 콘텐츠 페이지의 LoadComplete 이벤트

이것만은 알고 갑시다 3. 다음은 콘텐츠 페이지의 Button1 클릭 시 마스터 페이지의 TextBox1에 접근하여 TextBox1에 입력된 텍스트를 출력하는 구문입니다. 빈칸을 채워서 구문을 완성하세요. protected void Button1_Click(object sender, EventArgs e) { TextBox tTextBox = Response.Write( tTextBox.Text); }