Share via

ASP.NET 마스터 페이지 개요

  • 아티클

업데이트: 2007년 11월

ASP.NET 마스터 페이지를 사용하면 응용 프로그램의 페이지에 대해 일관된 레이아웃을 만들 수 있습니다. 단일 마스터 페이지는 응용 프로그램의 모든 페이지 또는 페이지 그룹에 대해 원하는 모양과 느낌 및 표준 동작을 정의합니다. 그런 다음 표시할 콘텐츠가 포함된 개별 콘텐츠 페이지를 만들 수 있습니다. 사용자가 요청한 콘텐츠 페이지는 마스터 페이지와 병합되어 마스터 페이지의 레이아웃과 콘텐츠 페이지의 콘텐츠가 조합된 결과가 만들어집니다.

마스터 페이지 작동 방식

마스터 페이지는 두 부분, 즉 마스터 페이지와 하나 이상의 콘텐츠 페이지로 구성되어 있습니다.

참고:

또한 마스터 페이지를 중첩할 수도 있습니다. 자세한 내용은 중첩된 ASP.NET 마스터 페이지를 참조하십시오.

마스터 페이지

마스터 페이지는 확장명이 .master인(예: MySite.master) ASP.NET 파일로 정적 텍스트, HTML 요소 및 서버 컨트롤이 포함될 수 있는 레이아웃이 미리 정의되어 있습니다. 마스터 페이지는 일반 .aspx 페이지에 사용되는 @ Page 지시문을 대체하는 특수 @ Master 지시문으로 식별됩니다. 이 지시문은 다음과 같습니다.

<%@ Master Language="VB" %>

<%@ Master Language="C#" %>

@ Master 지시문은 @ Control 지시문에서 포함할 수 있는 것과 같은 지시문을 대부분 포함할 수 있습니다. 예를 들어 다음 마스터 페이지 지시문은 코드 숨김 파일 이름을 포함하며 마스터 페이지에 클래스 이름을 할당합니다.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

또한 마스터 페이지에는 @ Master 지시문뿐만 아니라 html, head 및 form 같은 페이지의 모든 최상위 HTML 요소가 포함되어 있습니다. 예를 들어 마스터 페이지에서 레이아웃에는 HTML 표, 회사 로고에는 img 요소, 저작권 표시에는 정적 텍스트, 사이트의 표준 탐색을 만드는 데는 서버 컨트롤을 사용할 수 있습니다. 따라서 모든 HTML 및 ASP.NET 요소를 마스터 페이지의 일부로 사용할 수 있습니다.

대체 가능한 콘텐츠 자리 표시자

마스터 페이지에는 모든 페이지에 표시되는 정적 텍스트와 컨트롤 외에도 하나 이상의 ContentPlaceHolder 컨트롤이 포함되어 있습니다. 이러한 자리 표시자 컨트롤은 대체 가능한 콘텐츠를 표시할 영역을 정의합니다. 대체 가능한 콘텐츠는 콘텐츠 페이지에서 정의됩니다. ContentPlaceHolder 컨트롤을 정의하면 다음과 같은 마스터 페이지가 만들어집니다.

<% @ Master Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  >
    <title>Master page title</title>
</head>
<body>
    <form id="form1" >
        <table>
            <tr>
                <td><asp:contentplaceholder id="Main"  /></td>
                <td><asp:contentplaceholder id="Footer"  /></td>
            </tr>
        </table>
    </form>
</body>
</html>

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  >
    <title>Master page title</title>
</head>
<body>
    <form id="form1" >
        <table>
           <tr>
               <td><asp:contentplaceholder id="Main"  /></td>
               <td><asp:contentplaceholder id="Footer"  /></td>
           </tr>
        </table>
    </form>
</body>
</html>

콘텐츠 페이지

마스터 페이지의 자리 표시자 컨트롤에 대해 콘텐츠를 정의하려면 특정 마스터 페이지에 바인딩된 ASP.NET 페이지(.aspx 파일과 필요에 따라 코드 숨김 파일)인 개별 콘텐츠 페이지를 만듭니다. 또한 사용할 마스터 페이지를 가리키는 MasterPageFile 특성을 포함시키면 콘텐츠 페이지의 @ Page 지시문에 바인딩이 설정됩니다. 예를 들어 콘텐츠 페이지에는 Master1.master 페이지에 바인딩되는 다음 @ Page 지시문이 포함될 수 있습니다.

<%@ Page Language="VB" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page" %>

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>

콘텐츠 페이지에 콘텐츠를 만들려면 Content 컨트롤을 추가하여 마스터 페이지에 있는 ContentPlaceHolder 컨트롤에 매핑합니다. 예를 들어 마스터 페이지에는 Main 및 Footer라는 콘텐츠 자리 표시자가 포함될 수 있습니다. 콘텐츠 페이지에는 다음 그림처럼 두 개의 Content 컨트롤을 만들 수 있는데, 하나는 ContentPlaceHolder 컨트롤의 Main에 매핑되며 다른 하나는 ContentPlaceHolder 컨트롤의 Footer에 매핑됩니다.

자리 표시자 콘텐츠 대체

Content 컨트롤을 만든 후에는 여기에 텍스트와 컨트롤을 추가합니다. 콘텐츠 페이지에서 서버 코드의 스크립트 블록을 제외하고 Content 컨트롤의 외부에 있는 것은 모두 오류로 처리됩니다. ASP.NET 페이지에서 수행하는 모든 작업은 콘텐츠 페이지에서도 수행할 수 있습니다. 예를 들어 서버 컨트롤과 데이터베이스 쿼리 또는 다른 동적 메커니즘을 사용하여 Content 컨트롤에 대한 콘텐츠를 생성할 수 있습니다.

콘텐츠 페이지는 다음과 같습니다.

<% @ Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    Main content.
</asp:Content>
    
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
    Footer content.
</asp:content>

[C#]

<% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    Main content.
</asp:Content>
    
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
    Footer content.
</asp:content>

@ Page 지시문은 콘텐츠 페이지를 특정 마스터 페이지에 바인딩한 다음 마스터 페이지에 병합할 페이지의 제목을 정의합니다. 콘텐츠 페이지는 Content 컨트롤의 외부에 다른 태그를 포함할 수 없습니다. 마스터 페이지에는 특성이 있는 head 요소가 포함되어 있어야 런타임에 제목 설정을 병합할 수 있습니다.

여러 마스터 페이지를 만들어 사이트의 다양한 부분에 대해 서로 다른 레이아웃을 정의하고 각 마스터 페이지마다 서로 다른 콘텐츠 페이지 집합을 정의할 수 있습니다.

마스터 페이지의 이점

일반적으로 개발자가 기존 코드, 텍스트 및 컨트롤 요소를 반복해서 복사하고 프레임셋을 사용하며 공통 요소에 포함 파일을 사용하고 ASP.NET 사용자 정의 컨트롤을 사용하는 등의 작업을 수행하여 만들어 왔던 기능이 이제 마스터 페이지에서 제공됩니다. 마스터 페이지의 이점은 다음과 같습니다.

  • 페이지의 공통적인 기능을 중앙에 집중시켜 한 위치에서 업데이트할 수 있습니다.

  • 하나의 컨트롤 및 코드 집합을 만들어 결과를 페이지 집합에 적용하는 작업을 간단히 수행할 수 있습니다. 예를 들어 마스터 페이지에 컨트롤을 사용하면 모든 페이지에 적용되는 메뉴를 만들 수 있습니다.

  • 자리 표시자 컨트롤이 렌더링되는 방식을 제어하여 최종 페이지의 레이아웃을 더욱 정밀하게 제어할 수 있습니다.

  • 개별 콘텐츠 페이지에서 마스터 페이지를 사용자 지정할 수 있도록 하는 개체 모델을 제공합니다.

마스터 페이지의 런타임 동작

마스터 페이지는 런타임에 다음 순서에 따라 처리됩니다.

  1. 사용자가 콘텐츠 페이지의 URL을 입력하여 페이지를 요청합니다.

  2. 불러온 페이지에서 @ Page 지시문을 읽습니다. 지시문이 마스터 페이지를 참조하면 마스터 페이지도 읽습니다. 페이지를 처음 요청한 경우 두 페이지가 모두 컴파일됩니다.

  3. 콘텐츠가 업데이트된 마스터 페이지가 콘텐츠 페이지의 컨트롤 트리에 병합됩니다.

  4. 개별 Content 컨트롤의 콘텐츠가 마스터 페이지의 해당되는 ContentPlaceHolder 컨트롤에 병합됩니다.

  5. 병합된 페이지가 브라우저에 렌더링됩니다.

다음 다이어그램에서는 이 프로세스를 보여 줍니다.

런타임의 마스터 페이지

사용자의 관점에서 보면 조합된 마스터 및 콘텐츠 페이지는 별개의 단일 페이지입니다. 페이지의 URL은 콘텐츠 페이지의 URL과 같습니다.

프로그래밍 측면에서 이 두 페이지는 해당 컨트롤에 대해 개별 컨테이너 역할을 합니다. 마스터 페이지에 대해 컨테이너 역할을 하는 것은 콘텐츠 페이지입니다. 그러나 다음 단원에서 설명하는 것처럼 콘텐츠 페이지의 코드에서 공개 마스터 페이지 멤버를 참조할 수도 있습니다.

마스터 페이지는 콘텐츠 페이지의 일부가 됩니다. 마스터 페이지는 사용자 정의 컨트롤과 마찬가지로 콘텐츠 페이지의 자식 및 해당 페이지 내의 컨테이너 역할을 합니다. 그러나 이 경우 마스터 페이지는 브라우저에 렌더링되는 모든 서버 컨트롤의 컨테이너입니다. 병합된 마스터 및 콘텐츠 페이지의 컨트롤 트리는 다음과 같습니다.

Page
    Master Page
        (Master page markup and controls)
        ContentPlaceHolder
            Content page markup and server controls
        (Master page markup and controls)
        ContentPlaceHolder
            Content page markup and server controls
        (Master page markup and controls)

이 다이어그램은 간단하게 나타낸 모델입니다. 콘텐츠 페이지에 해당되는 Content 컨트롤이 없는 경우에는 마스터 페이지의 ContentPlaceHolder 컨트롤에 태그 및 컨트롤이 있을 수도 있습니다.

일반적으로 이 구조는 페이지 구성 방식이나 프로그래밍 방식에 영향을 주지 않습니다. 그러나 마스터 페이지에 페이지 전체 속성을 설정하면 콘텐츠 페이지의 동작에 영향을 줄 수도 있습니다. 마스터 페이지가 페이지에 있는 컨트롤의 가장 가까운 부모이기 때문입니다. 예를 들어 콘텐츠 페이지의 EnableViewState 속성을 true로 설정한 상태에서 마스터 페이지의 동일한 속성을 false로 설정하면 마스터 페이지의 설정이 우선하기 때문에 뷰 상태를 사용할 수 없게 됩니다.

마스터 페이지 및 콘텐츠 페이지 경로

콘텐츠 페이지를 요청하면 해당 콘텐츠가 마스터 페이지와 병합된 다음 이 페이지가 콘텐츠 페이지의 컨텍스트에서 실행됩니다. 예를 들어 HttpRequest 개체의 CurrentExecutionFilePath 속성을 가져오는 경우 콘텐츠 페이지 코드에서든, 마스터 페이지에서든 상관없이 경로에 콘텐츠 페이지의 위치가 표시됩니다.

마스터 페이지와 콘텐츠 페이지가 동일한 폴더에 있을 필요는 없습니다. 콘텐츠 페이지의 @ Page 지시문에 있는 MasterPageFile 특성이 .master 페이지라면 ASP.NET은 콘텐츠 및 마스터 페이지를 렌더링된 단일 페이지로 병합할 수 있습니다.

외부 리소스 참조

콘텐츠 페이지와 마스터 페이지에는 모두 외부 리소스를 참조하는 컨트롤 및 요소가 포함될 수 있습니다. 예를 들어 두 페이지에는 모두 이미지 파일을 참조하는 이미지 컨트롤이 포함되거나 다른 페이지를 참조하는 앵커가 포함될 수 있습니다.

병합된 콘텐츠 및 마스터 페이지의 컨텍스트는 콘텐츠 페이지의 컨텍스트입니다. 이로 인해 앵커에 있는 이미지 파일 및 대상 페이지 같은 리소스에 대해 URL을 지정하는 방식에 영향을 줄 수 있습니다.

서버 컨트롤

ASP.NET은 마스터 페이지의 서버 컨트롤에서 외부 리소스를 참조하는 속성의 URL을 동적으로 수정합니다. 예를 들어 Image 컨트롤을 마스터 페이지에 넣고 해당 ImageUrl 속성을 마스터 페이지를 기준으로 설정할 수 있습니다. 그런 다음 ASP.NET은 런타임에 URL이 콘텐츠 페이지의 컨텍스트에서 올바르게 해석되도록 이를 수정합니다.

ASP.NET이 URL을 수정할 수 있는 경우는 다음과 같습니다.

  • URL이 ASP.NET 서버 컨트롤의 속성입니다.

  • 속성이 URL이라는 내용이 컨트롤 내부에 표시되어 있습니다. 속성은 UrlPropertyAttribute 특성으로 표시되어 있습니다. 실질적으로 외부 리소스를 참조하는 데 일반적으로 사용되는 ASP.NET 서버 컨트롤 속성은 이런 식으로 표시됩니다.

기타 요소

ASP.NET은 서버 컨트롤이 아닌 요소의 URL은 수정할 수 없습니다. 예를 들어 마스터 페이지에 img 요소를 사용하고 해당 src 특성을 URL로 설정하면 ASP.NET은 URL을 수정하지 않습니다. 이 경우 URL은 콘텐츠 페이지의 컨텍스트에서 해석되며 그에 따라 URL을 만들게 됩니다.

일반적으로 마스터 페이지의 요소를 작업할 때는 서버 코드가 필요하지 않은 요소에 대해서도 서버 컨트롤을 사용하는 것이 좋습니다. 예를 들면 img 요소를 사용하는 대신 Image 서버 컨트롤을 사용하는 것입니다. 그러면 ASP.NET이 URL을 올바르게 해석할 수 있을 뿐만 아니라 마스터 또는 콘텐츠 페이지를 옮기는 경우 발생할 수 있는 유지 관리 문제를 피할 수 있습니다.

ASP.NET 서버 컨트롤 경로를 지정하는 방법에 대한 자세한 내용은 ASP.NET 웹 사이트 경로를 참조하십시오.

마스터 페이지 및 테마

ASP.NET 테마는 마스터 페이지에 직접 적용할 수 없습니다. @ Master 지시문에 테마 특성을 추가하는 경우 페이지를 실행하면 오류가 발생됩니다.

그러나 다음과 같은 상황에서는 테마가 마스터 페이지에 적용됩니다.

  • 콘텐츠 페이지에 테마가 정의되어 있는 경우. 마스터 페이지는 콘텐츠 페이지의 컨텍스트에서 해석되므로 콘텐츠 페이지의 테마는 마스터 페이지에도 적용됩니다.

  • pages 요소(ASP.NET 설정 스키마) 요소에 테마 정의를 포함시켜 사이트 전체에서 테마를 사용하도록 구성한 경우

자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.

마스터 페이지 범위 지정

콘텐츠 페이지는 다음 세 가지 수준에서 마스터 페이지에 연결할 수 있습니다.

  • 페이지 수준   다음 코드 예제처럼 각 콘텐츠 페이지에 페이지 지시문을 사용하여 마스터 페이지에 바인딩할 수 있습니다.

    <%@ Page Language="VB" MasterPageFile="MySite.Master" %> 

    <%@ Page Language="C#" MasterPageFile="MySite.Master" %>

  • 응용 프로그램 수준   응용 프로그램 구성 파일(Web.config)의 pages 요소를 설정하여 응용 프로그램의 모든 ASP.NET 페이지(.aspx 파일)가 마스터 페이지에 자동으로 바인딩되도록 지정할 수 있습니다. 이 요소는 다음과 같습니다.

    <pages masterPageFile="MySite.Master" />

    이 방법을 사용하면 Content 컨트롤이 있는 응용 프로그램의 모든 ASP.NET 페이지가 지정한 마스터 페이지와 병합됩니다. ASP.NET 페이지에 Content 컨트롤이 포함되어 있지 않으면 마스터 페이지가 적용되지 않습니다.

  • 폴더 수준   이 방법은 응용 프로그램 수준에서의 바인딩과 비슷하지만 Web.config 파일의 설정을 한 파일에서만 수행하는 점이 다릅니다. 그러면 마스터 페이지 바인딩이 해당 폴더의 ASP.NET 페이지에 적용됩니다.

참고 항목

작업

방법: ASP.NET 마스터 페이지 내용 참조

방법: ASP.NET 마스터 페이지 내용 참조

개념

ASP.NET 마스터 및 콘텐츠 페이지의 이벤트

중첩된 ASP.NET 마스터 페이지