2장. 홈페이지를 만들기 전에
Download
Report
Transcript 2장. 홈페이지를 만들기 전에
11
마스터 페이지
마스터 페이지 들어가기
마스터 페이지 사용하기
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지(master pages)란?
마스터 페이지는 .master라는 확장자를 가지면서 전
체 웹 사이트의 공통적인 구조를 정의하는 새로운
개념의 페이지 입니다.
일반적으로 웹 사이트는 다음과 같이 상단 영역, 좌
측 영역, 탐색 경로 영역, 하단 영역과 같이 웹 사이
트를 이루는 공통 영역들이 정해진 위치에 놓여져
있으면서 각 페이지의 특화된 내용들만 바뀌는 것이
보통입니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
위 그림에서는 상단 영역, 탐색 경로 영역, 하단 영
역이 모든 웹 사이트에 공통적으로 따라다니는 영역
이며 중간에 있는 내용만 각 페이지에 따라 바뀌게
됩니다. 이처럼 웹 사이트의 공통 영역과 공통 영역
이 놓여져 있는 전체적인 큰 틀(레이아웃)을 정의하
는 것이 바로 ASP.NET 2.0의 마스터 페이지 입니다.
다음은 위 그림과 같은 결과를 나오게 한 마스터 페
이지를 VS 2005에서 본 그림입니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지가 나오게 된 배경
사실 ASP.NET 2.0이 나오기 전에도 웹 사이트의 공통 영역들
을 효율적으로 처리하기 위한 다음과 같은 방법들이 있었습니
다.
- 포함 파일(include file)
- 사용자 정의 컨트롤(user controls)
포함 파일은 주로 ASP 시절에 사용하던 방법으로서 웹 사이트
의 공통 영역들을 하나의 물리적인 파일 형태로 분리해 놓고
필요한 부분에서 포함(include)시켜 사용하던 방법이었습니다.
물론 이 방법도 ASP.NET에서 사용가능 하지만 공통 영역들을
프로그래밍적으로 제어하기가 힘들고 포함 파일에서 잘못된
태그 하나가 전체 웹 사이트의 디자인에 영향을 줄 수 있다는
단점이 있으므로 ASP.NET에서는 거의 사용하지 않습니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
사용자 정의 컨트롤은 웹 사이트에서 공통적으로 사
용되는 부분들을 하나의 모듈로 만들어 여러 페이지
에서 끌어다 쓸 수 있도록 만든 컨트롤이며 이미 우
리가 ‘7.5. 사용자 정의 컨트롤(user controls)’ 절에
서 다루어 본 컨트롤입니다. ASP.NET 1.x에서는 공
통 영역을 정의하기 위해 대부분 이 사용자 정의 컨
트롤을 사용 했었습니다. 하지만 이 사용자 정의 컨
트롤은 웹 사이트의 공통 영역 자체는 정의할 수 있
지만 공통 영역들이 포함된 웹 사이트 전체의 틀(레
이아웃)은 정의할 수 없었습니다. 그러므로 모든 웹
페이지(.aspx)는 웹 사이트 전체 틀을 정의하는
HTML 태그(보통 <table> 태그를 사용)를 중복적으
로 가지고 있었으며 웹 사이트 전체 틀이 바뀔 경우
유연하게 대처할 수 없었습니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
이렇게 포함 파일과 사용자 정의 컨트롤의 단점을
보완하기 위해 나온 것이 바로 ASP.NET 2.0의 마스
터 페이지입니다. [그림 11-2]를 보면 공통 영역과
공통 영역들이 웹 사이트에서 자리잡고 있는 위치
(레이아웃)를 마스터 페이지에서 한번에 정의하고
있는 것을 볼 수 있습니다. 그러므로 개발자는 각 페
이지를 만들 때 포함되어야 할 공통 영역에 대해 전
혀 신경 쓰지 않아도 되며 웹 사이트 전체 디자인과
관련된 어떠한 변경 사항이 발생 하더라도 이 마스
터 페이지를 수정하여 마스터 페이지를 사용하고 있
는 모든 페이지(.aspx)에 일괄적으로 수정 사항을
적용 시킬 수 있는 것입니다. 그러므로 우리는 이 마
스터 페이지를 통해 개발 생산성 향상 및 효율적인
유지보수를 기대할 수 있습니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지의 구동 원리
마스터 페이지는 다음과 같은 구동 원리를 통해 웹
브라우저로 렌더링 됩니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
위의 그림에서 마스터 페이지(.master)에 정의된 공
통 영역과 콘텐츠 페이지(.aspx)에 정의된 특화된
콘텐츠가 결합(바인딩)하여 하나의 결과 페이지
(.aspx)로 서비스되는 것을 볼 수 있습니다. 여기서
콘텐츠 페이지는 마스터 페이지와 결합하는 .aspx
페이지를 말합니다.
또한 여기서 여러분이 한가지 알아두어야 할 것은
마스터 페이지는 단지 웹 사이트의 공통 요소 및 레
이아웃을 정의하는 페이지이므로 단독으로 사용자
에게 서비스될 수 없다는 것입니다. 즉,
http://localhost/Chapter11/MasterPage.master와
같은 URL을 사용하여 마스터 페이지를 직접 요청할
수 없으며 반드시 마스터 페이지를 사용하는 콘텐츠
페이지(.aspx)를 요청해야 합니다.
www.hanbitbook.co.kr
마스터 페이지 들어가기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
위의 그림을 좀더 구체적으로 그려보면 다음과 같습
니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
기본적인 마스터 페이지
마스터 페이지와 콘텐츠 페이지를 생성하는 방법부
터 알아 보겠습니다. 예제를 실행할
‘C:\WebSites\Chapter11\’ 파일 시스템 웹 사이
트를 만들고 다음의 [실습]을 따라 마스터 페이지와
콘텐츠 페이지를 생성해 봅시다.
[실습] 마스터 페이지와 콘텐츠 페이지 생성하기
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[예제 11-1] 마스터 페이지 예제
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지에서 기본 콘텐츠 정의하기
예제 11-1에서는 다음과 같이 ContentPlaceHolder 컨트롤에 어떠한
내용도 정의하지 않았습니다.
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server"></asp:ContentPlaceHolder>
하지만 다음과 같이 ContentPlaceHolder 컨트롤에 콘텐츠(내용)를
직접 작성하여 기본 콘텐츠를 정의할 수 있습니다.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
이것은 마스터 페이지의 ContentPlaceHolder1에 정의한 기본 콘텐츠입
니다.
</asp:ContentPlaceHolder>
이렇게 ContentPlaceHolder 컨트롤에 기본 콘텐츠를 정의하고 여기
에 Content 컨트롤을 바인딩시키지 않으면 ContentPlaceHolder 컨
트롤의 기본 콘텐츠가 그대로 렌더링됩니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[예제 11-2] 기본 콘텐츠 정의 예제
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서
마스터 페이지도 .aspx 페이지(웹 폼)와 마찬가지로 여러 이벤
트를 가지고 있습니다. 그리고 마스터 페이지가 콘텐츠 페이지
(.aspx 페이지)와 결합 하여 동작하는 만큼 이 두 페이지의 이
벤트 실행 순서를 이해하는 것은 매우 중요합니다. 그리고 마
스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서는 뒤에서 공
부할 “콘텐츠 페이지에서 마스터 페이지로의 접근 방법” 을 다
룰 때 필요한 선행지식이기도 합니다.
마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서를 알아보
기 위한 가장 간단한 방법은 각 이벤트가 발생할 때 해당 이벤
트 처리기에서 문자열을 출력해보는 것입니다. 그럼, 이와 관
련된 예제를 작성해 봅시다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[예제 11-3] 마스터 페이지와 콘텐츠 페이지의 이
벤트 실행 순서 예제
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
예제 11-3의 실행 결과 그림에서 우리가 캐치해야
할 부분은 바로 콘텐츠 페이지의 Load 이벤트가 마
스터 페이지의 Load 이벤트보다 먼저 일어난다는
사실입니다. 그러므로 페이지 로드 시에 마스터 페
이지의 Load 이벤트에서 초기화한 정보들을 콘텐츠
페이지에서 접근하려면 콘텐츠 페이지의 Load 이벤
트가 아닌 콘텐츠 페이지의 LoadComplete 또는
PreRender 이벤트(마스터 페이지의 Load 이벤트
뒤에 발생하는 이벤트들) 등에서 접근해야 한다는
것을 알 수 있습니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
콘텐츠 페이지에서 마스터 페이지로 접근하기
페이지 로드 시 마스터 페이지에서 초기화된 서버
컨트롤을 콘텐츠 페이지에서 참조하고 콘텐츠 페이
지의 Button 클릭 시 다시 마스터 페이지에 있는 서
버 컨트롤을 참조하는 예제를 작성해 봅시다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[예제 11-4] 콘텐츠 페이지에서 마스터 페이지로의
접근 예제
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
<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;
}
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
중첩 마스터 페이지
이번에는 여러 개의 마스터 페이지를 중첩해서 사용
하는 중첩 마스터 페이지에 대해 공부합니다. 중첩
마스터 페이지의 구동 원리는 다음과 같습니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
부모 마스터 페이지와 자식 마스터 페이지가 결합하여 새로운
결과 마스터 페이지를 생성하고 이렇게 만들어진 결과 마스터
페이지와 콘텐츠 페이지가 다시 결합하여 최종적인 결과 페이
지를 생성합니다. 물론 중첩 마스터 페이지는 그 특성상 결과
마스터 페이지를 부모 마스터 페이지로 하고 다른 마스터 페이
지를 자식 마스터 페이지로 하여 계속적으로 중첩할 수 있습니
다.
중첩 마스터 페이지는 마스터 페이지 중에서도 공통된 부분을
뽑아내서 정의해야 할 때 유용하게 사용할 수 있습니다. 예를
들어 대규모 사이트에서 사이트의 전체적인 레이아웃은 부모
마스터 페이지에 정의하고 각 파트 별로 사용하는 마스터 페이
지는 자식 마스터 페이지로 정의하면 체계적이고 효율적으로
사이트의 레이아웃을 잡을 수 있습니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
그럼, 세계로 뻗어 나가는 다국적 기업인 마데전자의 각 국가
별 웹 사이트를 한 웹 응용 프로그램에서 관리한다고 가정하고
중첩 마스터 페이지를 사용해서 마데 전자의 각 국가별 웹 사
이트를 구성해 보겠습니다. 그전에 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 지시문을 직접 수정하여
자식 마스터 페이지로 만들어야 합니다. 참고로 다음 그림과
같이 새 항목 추가 대화상자의 템플릿에서 ‘마스터 페이지’를
선택하더라도 마스터 페이지 선택 옵션이 비활성화되어 중첩
마스터 페이지를 만들 수 없습니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
아울러 한가지 더 덧붙이자면, 이와 같이 언어가 다른 다국적
웹 사이트는 지역화(localization)라는 기능을 통해 좀더 효율
적으로 구현할 수 있으며 여기서는 단지, 중첩 마스터 페이지
의 구조와 사용법을 설명하기 위해 다국적 웹 사이트를 예제로
선택했다는 것을 알아둡시다. 지역화는 ‘17장. 다국적 웹 사이
트 만들기’ 에서 공부합니다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[예제 11-5] 중첩 마스터 페이지 예제
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
마스터 페이지의 적용 범위 설정
웹 페이지 단위
• 마스터 페이지를 웹 페이지 단위로 적용하기 위해서는
@Page 지시문 또는 @Master 지시문의 MasterPageFile
특성에 해당 마스터 페이지의 경로를 지정하면 됩니다. 이
것은 지금까지 우리가 사용해 왔던 범위 설정 방법입니다.
웹 응용 프로그램 단위
• 마스터 페이지를 응용 프로그램 단위로 적용하기 위해서는
다음과 같이 구성 파일에 <pages> 요소를 추가하고 이 요
소의 masterPageFile 특성에 해당 마스터 페이지의 경로를
지정한 후,
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
<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>
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
<Exercise 11-1> 동적으로 마스터 페이지 연결
다음과 같은 두 개의 마스터 페이지가 존재할 때
[MasterPage1.master]
… (생략) …
<h3>MasterPage1.master</h3>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
… (생략) …
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
[MasterPage2.master]
… (생략) …
<h3>MasterPage2.master</h3>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
… (생략) …
다음 그림과 같이 <마스터 페이지1 사용> 버튼을 클릭하면
MasterPage1.master를 사용하고 <마스터 페이지2 사용> 버
튼을 클릭하면 MasterPage2.master를 사용하는 콘텐츠 페이
지를 구현해 봅시다.
www.hanbitbook.co.kr
마스터 페이지 사용하기
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
힌트 : 콘텐츠 페이지에서 사용할 마스터 페이지를 동적으로 연
결하려면 Page 개체의 MasterPageFile 속성에 연결할 마스터
페이지의 경로를 지정하면 됩니다
(예 : Page.MasterPageFile = “~/MasterPage1.master”;).
www.hanbitbook.co.kr
이것만은 알고 갑시다
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
1. 각 문장에 어울리는 적절한 용어를 상자 안에서 골라 보세요.
ContentPlaceHolder
콘텐츠 페이지
(1)
(2)
(3)
(4)
(5)
마스터 페이지
MasterPageFile
@Master 지시문
( )는 .master라는 확장자를 가지면서 전체 웹 사이트의 공통 영역 및 레이아웃을 정의하
는 새로운 개념의 페이지 입니다.
( )는 마스터 페이지와 결합하는 .aspx 페이지입니다.
웹 폼(.aspx)에서는 @Page 지시문을 사용하여 웹 폼의 특성을 정의하는 반면, 마스터 페이
지(.master)에서는 ( )을 사용하여 마스터 페이지의 특성을 정의합니다.
Content 컨트롤에 정의된 콘텐츠(내용)는 마스터 페이지의 ( ) 컨트롤에 렌더링됩니다.
콘텐츠 페이지의 @Page 지시문에는 사용할 마스터 페이지의 경로를 지정하는 ( ) 특성을
반드시 포함해야 합니다.
www.hanbitbook.co.kr
이것만은 알고 갑시다
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
2. 다음은 마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서를 위에서부터
아래로 기술한 것입니다. 빈칸에 들어갈 이벤트는 무엇입니까?
콘텐츠 페이지의 Init 이벤트
콘텐츠 페이지의 PreLoad 이벤트
(
)
마스터 페이지의 Load 이벤트
마스터 페이지 또는 콘텐츠 페이지의 서버 컨트롤 이벤트
콘텐츠 페이지의 LoadComplete 이벤트
www.hanbitbook.co.kr
이것만은 알고 갑시다
RUNNING HEADER, 14 PT., ALL CAPS, Line Spacing=1 line
3. 다음은 콘텐츠 페이지의 Button1 클릭 시 마스터 페이지의 TextBox1에
접근하여 TextBox1에 입력된 텍스트를 출력하는 구문입니다. 빈칸을 채
워서 구문을 완성하세요.
protected void Button1_Click(object sender, EventArgs e)
{
TextBox tTextBox =
Response.Write( tTextBox.Text);
}
www.hanbitbook.co.kr