마스터 페이지를 사용하여 사이트 전체 레이아웃 만들기(VB)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

이 자습서에서는 master 페이지 기본 사항을 보여 줍니다. 즉, master 페이지, master 페이지를 만드는 방법, 콘텐츠 장소 보유자는 무엇이며, master 페이지를 사용하는 ASP.NET 페이지를 만드는 방법, master 페이지 수정이 관련 콘텐츠 페이지에 자동으로 반영되는 방법 등이 있습니다.

소개

잘 디자인된 웹 사이트의 한 가지 특성은 일관된 사이트 전체 페이지 레이아웃입니다. 예를 들어 www.asp.net 웹 사이트를 예로 들어 보겠습니다. 이 글을 쓰는 시점에 모든 페이지에는 페이지의 위쪽과 아래쪽에 동일한 콘텐츠가 있습니다. 그림 1에서 알 수 있듯이 각 페이지의 맨 위에는 Microsoft 커뮤니티 목록이 있는 회색 막대가 표시됩니다. 사이트 로고 아래에는 사이트가 번역된 언어 목록과 홈, 시작, 학습, 다운로드 등의 핵심 섹션이 있습니다. 마찬가지로 페이지의 맨 아래에는 www.asp.net 광고 정보, 저작권 명세서 및 개인정보처리방침 링크가 포함됩니다.

www.asp.net 웹 사이트는 모든 페이지에서 일관된 모양과 느낌을 사용합니다.

그림 01: www.asp.net 웹 사이트는 모든 페이지에서 일관된 모양과 느낌을 사용합니다(전체 크기 이미지를 보려면 클릭).

잘 디자인된 사이트의 또 다른 특성은 사이트의 모양을 변경할 수 있는 용이성입니다. 그림 1은 2008년 3월 현재 www.asp.net 홈페이지를 보여 주지만, 현재와 이 자습서의 발행물 사이에 모양과 느낌이 변경되었을 수 있습니다. 아마도 맨 위에 있는 메뉴 항목은 MVC 프레임워크에 대한 새 섹션을 포함하도록 확장될 것입니다. 또는 다른 색, 글꼴 및 레이아웃이 있는 근본적으로 새로운 디자인이 공개될 수도 있습니다. 전체 사이트에 이러한 변경 내용을 적용하는 것은 사이트를 구성하는 수천 웹 페이지를 수정할 필요가 없는 빠르고 간단한 프로세스여야 합니다.

master 페이지를 사용하여 ASP.NET 사이트 전체 페이지 템플릿을 만들 수 있습니다. 간단히 말해서, master 페이지는 콘텐츠 페이지별로 사용자 지정할 수 있는 지역뿐만 아니라 모든 콘텐츠 페이지 간에 공통적인 태그를 정의하는 특별한 유형의 ASP.NET 페이지입니다. (콘텐츠 페이지는 master 페이지에 바인딩된 ASP.NET 페이지입니다.) master 페이지의 레이아웃이나 서식이 변경되면 모든 콘텐츠 페이지의 출력이 즉시 업데이트되므로 사이트 전체의 모양 변경 내용을 단일 파일(즉, master 페이지)을 업데이트하고 배포하는 것만큼 쉽게 적용할 수 있습니다.

이 자습서는 master 페이지를 사용하여 탐색하는 자습서 시리즈의 첫 번째 자습서입니다. 이 자습서 시리즈의 과정에서 다음을 수행합니다.

  • master 페이지 및 관련 콘텐츠 페이지 만들기를 검토합니다.
  • 다양한 팁, 요령 및 트랩에 대해 설명합니다.
  • 일반적인 master 페이지 문제를 식별하고 해결 방법을 탐색합니다.
  • 콘텐츠 페이지에서 master 페이지에 액세스하는 방법을 참조하세요.
  • 런타임에 콘텐츠 페이지의 master 페이지를 지정하는 방법을 알아봅니다.
  • 기타 고급 master 페이지 topics.

이러한 자습서는 간결하고 프로세스를 시각적으로 안내하는 다양한 스크린샷과 함께 단계별 지침을 제공하도록 준비되었습니다. 각 자습서는 C# 및 Visual Basic 버전에서 사용할 수 있으며 사용된 전체 코드의 다운로드를 포함합니다.

이 첫 번째 자습서는 master 페이지 기본 사항을 살펴보는 것으로 시작합니다. master 페이지가 작동하는 방식, Visual Web Developer를 사용하여 master 페이지 및 관련 콘텐츠 페이지 만들기를 살펴보고, master 페이지의 변경 내용이 콘텐츠 페이지에 즉시 반영되는 방법을 알아봅니다. 그럼 시작하겠습니다.

마스터 페이지 작동 방식 이해

일관된 사이트 전체 페이지 레이아웃을 사용하여 웹 사이트를 빌드하려면 각 웹 페이지에서 사용자 지정 콘텐츠 외에도 일반적인 서식 태그를 내보내야 합니다. 예를 들어 www.asp.net 각 자습서 또는 포럼 게시물에는 고유한 콘텐츠가 있지만 이러한 각 페이지는 최상위 섹션 링크(홈, 시작, 학습 등)를 표시하는 일련의 공통 <div> 요소도 렌더링합니다.

일관된 모양과 느낌으로 웹 페이지를 만드는 다양한 기술이 있습니다. 순진한 방법은 일반적인 레이아웃 태그를 복사하여 모든 웹 페이지에 붙여넣는 것이지만, 이 방법에는 여러 가지 단점이 있습니다. 우선 새 페이지를 만들 때마다 공유 콘텐츠를 복사하여 페이지에 붙여넣어야 합니다. 이러한 복사 및 붙여넣기 작업은 실수로 공유 태그의 하위 집합만 새 페이지에 복사할 수 있으므로 오류가 발생할 수 있습니다. 그리고 이 방법을 사용하면 사이트의 모든 단일 페이지를 편집해야 새로운 모양과 느낌을 사용하기 때문에 기존 사이트 전체의 모양을 새로운 것으로 바꾸는 것이 진정한 고통입니다.

버전 2.0을 ASP.NET 전에 페이지 개발자는 종종 사용자 컨트롤 에 공통 태그를 배치한 다음 이러한 사용자 컨트롤을 각 페이지에 추가했습니다. 이 방법을 사용하려면 페이지 개발자가 모든 새 페이지에 사용자 컨트롤을 수동으로 추가해야 했지만 일반적인 태그를 업데이트할 때 사용자 컨트롤만 수정해야 하므로 사이트 전체에서 쉽게 수정할 수 있어야 했습니다. 안타깝게도 Visual Studio .NET 2002 및 2003은 ASP.NET 1.x 애플리케이션을 만드는 데 사용되는 Visual Studio 버전으로 디자인 보기에서 사용자 컨트롤을 회색 상자로 렌더링했습니다. 따라서 이 방법을 사용하는 페이지 개발자는 WYSIWYG 디자인 타임 환경을 즐기지 못했습니다.

사용자 컨트롤 사용의 단점은 master 페이지가 도입된 ASP.NET 버전 2.0 및 Visual Studio 2005에서 해결되었습니다. master 페이지는 사이트 전체 태그와 연결된 콘텐츠 페이지가 사용자 지정 태그를 정의하는 지역을 모두 정의하는 특별한 유형의 ASP.NET 페이지입니다. 1단계에서 볼 수 있듯이 이러한 지역은 ContentPlaceHolder 컨트롤에 의해 정의됩니다. ContentPlaceHolder 컨트롤은 콘텐츠 페이지에서 사용자 지정 콘텐츠를 삽입할 수 있는 master 페이지의 컨트롤 계층 구조에서 위치를 표시하기만 하면 됩니다.

참고

master 페이지의 핵심 개념과 기능은 ASP.NET 버전 2.0 이후로 변경되지 않았습니다. 그러나 Visual Studio 2008은 Visual Studio 2005에서 부족한 기능인 중첩된 master 페이지에 대한 디자인 타임 지원을 제공합니다. 이후 자습서에서는 중첩된 master 페이지 사용을 살펴보겠습니다.

그림 2는 www.asp.net 대한 master 페이지가 어떻게 표시되는지 보여줍니다. master 페이지는 각 페이지의 위쪽, 아래쪽 및 오른쪽에 있는 일반적인 사이트 전체 레이아웃과 각 개별 웹 페이지의 고유한 콘텐츠가 있는 왼쪽 가운데의 ContentPlaceHolder를 정의합니다.

마스터 페이지는 콘텐츠 페이지 단위로 편집 가능한 Site-Wide 레이아웃 및 지역을 정의합니다.

그림 02: 마스터 페이지는 콘텐츠 페이지별로 편집 가능한 Site-Wide 레이아웃 및 지역을 정의합니다.

master 페이지가 정의되면 확인란의 틱을 통해 새 ASP.NET 페이지에 바인딩할 수 있습니다. 콘텐츠 페이지라고 하는 이러한 ASP.NET 페이지에는 각 master 페이지의 ContentPlaceHolder 컨트롤에 대한 콘텐츠 컨트롤이 포함됩니다. 브라우저를 통해 콘텐츠 페이지를 방문하면 ASP.NET 엔진은 master 페이지의 컨트롤 계층 구조를 만들고 콘텐츠 페이지의 컨트롤 계층 구조를 적절한 위치에 삽입합니다. 이 결합된 컨트롤 계층 구조가 렌더링되고 결과 HTML이 최종 사용자의 브라우저로 반환됩니다. 따라서 콘텐츠 페이지는 ContentPlaceHolder 컨트롤 외부의 master 페이지에 정의된 공통 태그와 자체 콘텐츠 컨트롤 내에 정의된 페이지별 태그를 모두 내보낸다. 그림 3에서는 이 개념을 보여 줍니다.

요청된 페이지의 태그가 마스터 페이지에 융합됨

그림 03: 요청한 페이지의 태그가 마스터 페이지에 융합됨(전체 크기 이미지를 보려면 클릭)

이제 master 페이지의 작동 방식에 대해 설명했으므로 Visual Web Developer를 사용하여 master 페이지 및 관련 콘텐츠 페이지를 만드는 방법을 살펴보겠습니다.

참고

가능한 한 많은 사용자에게 도달하기 위해 이 자습서 시리즈에서 빌드하는 ASP.NET 웹 사이트는 Microsoft의 무료 버전의 Visual Studio 2008, Visual Web Developer 2008과 함께 ASP.NET 3.5를 사용하여 만들어집니다. 아직 ASP.NET 3.5로 업그레이드하지 않은 경우 걱정하지 마세요. 이 자습서에서 설명하는 개념은 ASP.NET 2.0 및 Visual Studio 2005와 동일하게 잘 작동합니다. 그러나 일부 데모 애플리케이션은 .NET Framework 버전 3.5의 새로운 기능을 사용할 수 있습니다. 3.5 특정 기능을 사용하는 경우 버전 2.0에서 유사한 기능을 구현하는 방법을 설명하는 메모가 포함되어 있습니다. 각 자습서에서 다운로드할 수 있는 데모 애플리케이션은 .NET Framework 버전 3.5를 대상으로 하므로 Web.config 3.5 특정 구성 요소가 포함된 파일이 생성됩니다. 긴 이야기 요컨대, 아직 컴퓨터에 .NET 3.5를 설치하지 않은 경우 다운로드 가능한 웹 애플리케이션이 먼저 에서 Web.config3.5 관련 태그를 제거하지 않고는 작동하지 않습니다. 이 항목에 대한 자세한 내용은 파일을 참조하세요Web.config.

1단계: 마스터 페이지 만들기

master 및 콘텐츠 페이지를 만들고 사용하는 것을 살펴보려면 먼저 ASP.NET 웹 사이트가 필요합니다. 먼저 새 파일 시스템 기반 ASP.NET 웹 사이트를 만듭니다. 이렇게 하려면 Visual Web Developer를 시작하고 파일 메뉴로 이동하여 새 웹 사이트를 선택하여 새 웹 사이트 대화 상자를 표시합니다(그림 4 참조). ASP.NET 웹 사이트 템플릿을 선택하고, 위치 드롭다운 목록을 파일 시스템으로 설정하고, 웹 사이트를 배치할 폴더를 선택하고, 언어를 Visual Basic으로 설정합니다. 그러면 ASP.NET 페이지, 폴더 및 Web.config 파일이 있는 App_Data 새 웹 사이트가 Default.aspx 만들어질 것입니다.

참고

Visual Studio는 웹 사이트 프로젝트 및 웹 애플리케이션 프로젝트라는 두 가지 프로젝트 관리 모드를 지원합니다. 웹 사이트 프로젝트에는 프로젝트 파일이 없는 반면 웹 애플리케이션 프로젝트는 Visual Studio .NET 2002/2003의 프로젝트 아키텍처를 모방합니다. 프로젝트 파일을 포함하고 프로젝트의 소스 코드를 폴더에 /bin 배치된 단일 어셈블리로 컴파일합니다. Visual Studio 2005는 처음에는 웹 사이트 프로젝트만 지원했지만 웹 애플리케이션 프로젝트 모델은 서비스 팩 1과 함께 다시 도입되었습니다. Visual Studio 2008은 두 프로젝트 모델을 모두 제공합니다. 그러나 Visual Web Developer 2005 및 2008 버전은 웹 사이트 프로젝트만 지원합니다. 이 자습서 시리즈의 데모에는 웹 사이트 프로젝트 모델을 사용합니다. Express가 아닌 버전을 사용하고 웹 애플리케이션 프로젝트 모델을 대신 사용하려는 경우 자유롭게 사용할 수 있지만 화면에 표시되는 내용과 수행해야 하는 단계와 이러한 자습서에 제공된 스크린샷 및 지침 간에 약간의 차이가 있을 수 있습니다.

새 파일 System-Based 웹 사이트 만들기

그림 04: 새 파일 System-Based 웹 사이트 만들기(전체 크기 이미지를 보려면 클릭)

그런 다음 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택하고 마스터 페이지 템플릿을 선택하여 루트 디렉터리의 사이트에 master 페이지를 추가합니다. master 페이지는 확장.master으로 끝납니다. 이 새 master 페이지의 Site.master 이름을 지정하고 추가를 클릭합니다.

사이트라는 마스터 페이지를 추가합니다. 웹 사이트로 master

그림 05: 웹 사이트에 명명된 Site.master 마스터 페이지 추가(전체 크기 이미지를 보려면 클릭)

Visual Web Developer를 통해 새 master 페이지 파일을 추가하면 다음과 같은 선언적 태그가 있는 master 페이지가 만들어집니다.

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

선언적 태그의 첫 번째 줄은 지시문입니다@Master. @Master 지시문은 ASP.NET 페이지에 표시되는 지시문과 비슷합니다@Page. VB(서버 쪽 언어)와 master 페이지의 코드 숨김 클래스의 위치 및 상속에 대한 정보를 정의합니다.

DOCTYPE 및 페이지의 선언적 태그가 지시문 아래에 @Master 나타납니다. 페이지에는 4개의 서버 쪽 컨트롤과 함께 정적 HTML이 포함됩니다.

  • 웹 양식(<form runat="server">) - 모든 ASP.NET 페이지에는 일반적으로 웹 양식이 있기 때문에 master 페이지에 웹 양식 내에 나타나야 하는 웹 컨트롤이 포함될 수 있으므로 각 콘텐츠 페이지에 웹 양식을 추가하는 대신 master 페이지에 웹 양식을 추가해야 합니다.
  • 라는 ContentPlaceHolder1ContentPlaceHolder 컨트롤 - 이 ContentPlaceHolder 컨트롤은 웹 양식 내에 표시되며 콘텐츠 페이지의 사용자 인터페이스에 대한 영역으로 사용됩니다.
  • 서버 쪽 <head> 요소 - 요소에는 <head> 특성이 runat="server" 있으므로 서버 쪽 코드를 통해 액세스할 수 있습니다. 요소는 <head> 페이지의 제목 및 기타 <head>관련 태그를 프로그래밍 방식으로 추가하거나 조정할 수 있도록 이러한 방식으로 구현됩니다. 예를 들어 ASP.NET 페이지의 Title 속성을 설정하면 서버 컨트롤에서 <title> 렌더링되는 요소가 변경됩니다 <head> .
  • 라는 headContentPlaceHolder 컨트롤 - 이 ContentPlaceHolder 컨트롤은 서버 컨트롤 내에 <head> 표시되며 요소에 콘텐츠를 <head> 선언적으로 추가하는 데 사용할 수 있습니다.

이 기본 master 페이지 선언적 태그는 고유한 master 페이지를 디자인하기 위한 시작점 역할을 합니다. HTML을 자유롭게 편집하거나 웹 컨트롤 또는 ContentPlaceHolders를 master 페이지에 추가할 수 있습니다.

참고

master 페이지를 디자인할 때 master 페이지에 웹 양식이 포함되어 있고 이 웹 양식 내에 하나 이상의 ContentPlaceHolder 컨트롤이 표시되는지 확인합니다.

간단한 사이트 레이아웃 만들기

의 기본 선언적 태그를 확장 Site.master하여 모든 페이지가 공유하는 사이트 레이아웃을 만들어 보겠습니다. 공통 머리글, 탐색, 뉴스 및 기타 사이트 전체 콘텐츠가 있는 왼쪽 열, "Powered by Microsoft ASP.NET" 아이콘이 표시된 바닥글. 그림 6은 브라우저를 통해 콘텐츠 페이지 중 하나를 볼 때 master 페이지의 최종 결과를 보여줍니다. 그림 6의 빨간색 원 영역은 방문하는 페이지()Default.aspx와 관련이 있습니다. 다른 콘텐츠는 master 페이지에 정의되므로 모든 콘텐츠 페이지에서 일관성이 있습니다.

마스터 페이지는 위쪽, 왼쪽 및 아래쪽 부분에 대한 태그를 정의합니다.

그림 06: 마스터 페이지는 위쪽, 왼쪽 및 아래쪽 부분에 대한 태그를 정의합니다(전체 크기 이미지를 보려면 클릭).

그림 6에 표시된 사이트 레이아웃을 달성하려면 먼저 다음 선언적 태그를 Site.master 포함하도록 master 페이지를 업데이트합니다.

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

master 페이지의 레이아웃은 일련의 <div> HTML 요소를 사용하여 정의됩니다. topContent<div> 에는 각 페이지의 맨 위에 표시되는 태그가 포함되며 , mainContentleftContent및 footerContent<div> 은 페이지의 콘텐츠, 왼쪽 열 및 "Powered by Microsoft ASP.NET" 아이콘을 각각 표시하는 데 사용됩니다. 이러한 <div> 요소를 추가하는 것 외에도 기본 ContentPlaceHolder 컨트롤의 속성 이름을 에서 로 ContentPlaceHolder1MainContent변경 ID 했습니다.

이러한 다양한 <div> 요소에 대한 서식 및 레이아웃 규칙은 master 페이지의 <head> 요소에 있는 요소를 통해 <link> 지정된 CSS(Cascading Stylesheet) 파일에 Styles.css설명되어 있습니다. 이러한 다양한 규칙은 위에서 설명한 각 <div> 요소의 모양과 느낌을 정의합니다. 예를 들어 topContent<div> "마스터 페이지 자습서" 텍스트 및 링크를 표시하는 요소에는 다음과 같이 형식 지정 규칙이 지정됩니다 Styles.css .

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

컴퓨터에서 팔로우하는 경우 이 자습서의 함께 제공되는 코드를 다운로드하고 프로젝트에 파일을 추가 Styles.css 해야 합니다. 마찬가지로 라는 Images 폴더를 만들고 다운로드한 데모 웹 사이트에서 프로젝트로 "Powered by Microsoft ASP.NET" 아이콘을 복사해야 합니다.

참고

CSS 및 웹 페이지 서식에 대한 설명은 이 문서의 scope. CSS에 대한 자세한 내용은 W3Schools.com CSS 자습서를검사. 또한 이 자습서의 함께 제공되는 코드를 다운로드하고 에서 CSS 설정을 Styles.css 사용하여 다양한 서식 규칙의 효과를 확인하는 것이 좋습니다.

기존 디자인 템플릿을 사용하여 마스터 페이지 만들기

수년에 걸쳐 저는 중소기업을 위한 여러 ASP.NET 웹 애플리케이션을 구축했습니다. 일부 클라이언트에는 사용하려는 기존 사이트 레이아웃이 있습니다. 다른 사람들은 유능한 그래픽 디자이너를 고용했습니다. 몇몇은 나에게 웹 사이트 레이아웃을 디자인하도록 맡겼습니다. 그림 6에서 알 수 있듯이 프로그래머에게 웹 사이트의 레이아웃을 디자인하는 작업은 일반적으로 의사가 세금을 납부하는 동안 회계사가 심장 수술을 하는 것만큼 현명합니다.

다행히 무료 HTML 디자인 템플릿을 제공하는 수많은 웹 사이트가 있습니다 - Google은 검색 용어 "무료 웹 사이트 템플릿"에 대해 6 백만 개 이상의 결과를 반환했습니다. 내가 가장 좋아하는 것 중 하나는 OpenDesigns.org. 원하는 웹 사이트 템플릿을 찾으면 CSS 파일 및 이미지를 웹 사이트 프로젝트에 추가하고 템플릿의 HTML을 master 페이지에 통합합니다.

참고

또한 Microsoft는 Visual Studio의 새 웹 사이트 대화 상자에 통합되는 다양한 무료 ASP.NET 디자인 시작 키트 템플릿 을 제공합니다.

2단계: 연결된 콘텐츠 페이지 만들기

master 페이지를 만들면 master 페이지에 바인딩된 ASP.NET 페이지 만들기를 시작할 준비가 된 것입니다. 이러한 페이지를 콘텐츠 페이지라고 합니다.

프로젝트에 새 ASP.NET 페이지를 추가하고 master 페이지에 바인딩 Site.master 해 보겠습니다. 솔루션 탐색기 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 새 항목 추가 옵션을 선택합니다. 웹 양식 서식 파일을 선택하고 이름을 About.aspx입력한 다음 그림 7과 같이 "master 페이지 선택" 확인란을 검사. 이렇게 하면 사용할 master 페이지를 선택할 수 있는 마스터 페이지 선택 대화 상자(그림 8 참조)가 표시됩니다.

참고

웹 사이트 프로젝트 모델 대신 웹 애플리케이션 프로젝트 모델을 사용하여 ASP.NET 웹 사이트를 만든 경우 그림 7에 표시된 새 항목 추가 대화 상자에 "master 페이지 선택" 확인란이 표시되지 않습니다. 웹 애플리케이션 프로젝트 모델을 사용할 때 콘텐츠 페이지를 만들려면 웹 양식 서식 파일 대신 웹 콘텐츠 양식 템플릿을 선택해야 합니다. 웹 콘텐츠 양식 서식 파일을 선택하고 추가를 클릭하면 그림 8에 표시된 마스터 페이지 선택 대화 상자가 나타납니다.

새 콘텐츠 추가 페이지

그림 07: 새 콘텐츠 페이지 추가(전체 크기 이미지를 보려면 클릭)

사이트를 선택합니다. master 마스터 페이지

그림 08: 마스터 페이지 선택 Site.master (전체 크기 이미지를 보려면 클릭)

다음 선언적 태그에서 볼 수 있듯이 새 콘텐츠 페이지에는 @Page master 페이지를 가리키는 지시문과 각 master 페이지의 ContentPlaceHolder 컨트롤에 대한 콘텐츠 컨트롤이 포함됩니다.

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

참고

1단계의 "단순 사이트 레이아웃 만들기" 섹션에서 이름을 로 변경했습니다 ContentPlaceHolder1MainContent. 이 ContentPlaceHolder 컨트롤의 ID 이름을 같은 방식으로 변경하지 않은 경우 콘텐츠 페이지의 선언적 태그는 위에 표시된 태그와 약간 다릅니다. 즉, 두 번째 콘텐츠 컨트롤은 ContentPlaceHolderID master 페이지에 있는 해당 ContentPlaceHolder 컨트롤의 를 반영 ID 합니다.

콘텐츠 페이지를 렌더링할 때 ASP.NET 엔진은 페이지의 콘텐츠 컨트롤을 master 페이지의 ContentPlaceHolder 컨트롤과 융합해야 합니다. ASP.NET 엔진은 지시문 MasterPageFile 의 특성에서 @Page 콘텐츠 페이지의 master 페이지를 결정합니다. 위의 태그와 같이 이 콘텐츠 페이지는 에 ~/Site.master바인딩됩니다.

master 페이지에는 두 개의 ContentPlaceHolder 컨트롤과 headMainContent Visual Web Developer가 두 개의 콘텐츠 컨트롤을 생성했기 때문입니다. 각 콘텐츠 컨트롤은 해당 속성을 통해 특정 ContentPlaceHolder를 참조합니다 ContentPlaceHolderID .

master 페이지가 이전 사이트 전체 템플릿 기술에 비해 빛을 발하는 곳은 디자인 타임 지원입니다. 그림 9는 Visual Web Developer의 디자인 보기를 통해 볼 때의 콘텐츠 페이지를 보여줍니다 About.aspx . master 페이지 콘텐츠는 표시되지만 회색으로 표시되며 수정할 수 없습니다. 그러나 master 페이지의 ContentPlaceHolders에 해당하는 콘텐츠 컨트롤은 편집할 수 있습니다. 다른 ASP.NET 페이지와 마찬가지로 원본 또는 디자인 보기를 통해 웹 컨트롤을 추가하여 콘텐츠 페이지의 인터페이스를 만들 수 있습니다.

콘텐츠 페이지의 디자인 보기에 Page-Specific 및 마스터 페이지 내용이 모두 표시됩니다.

그림 09: 콘텐츠 페이지의 디자인 보기에 Page-Specific 및 마스터 페이지 내용이 모두 표시됩니다(전체 크기 이미지를 보려면 클릭).

콘텐츠 페이지에 태그 및 웹 컨트롤 추가

잠시 시간을 내어 페이지의 일부 콘텐츠를 만듭니다 About.aspx . 그림 10에서 볼 수 있듯이 "작성자 정보" 제목과 몇 개의 텍스트 단락을 입력했지만 웹 컨트롤도 자유롭게 추가할 수 있습니다. 이 인터페이스를 만든 후 브라우저를 About.aspx 통해 페이지를 방문합니다.

브라우저를 통해 About.aspx 페이지 방문

그림 10: 브라우저를 About.aspx 통해 페이지 방문(전체 크기 이미지를 보려면 클릭)

요청된 콘텐츠 페이지와 연결된 master 페이지가 완전히 웹 서버에서 융합되고 렌더링된다는 점을 이해하는 것이 중요합니다. 그런 다음 최종 사용자의 브라우저가 결과와 융합된 HTML을 보냅니다. 이를 확인하려면 보기 메뉴로 이동하여 원본을 선택하여 브라우저에서 받은 HTML을 봅니다. 단일 창에 두 개의 서로 다른 웹 페이지를 표시하기 위한 프레임이나 기타 특수한 기술은 없습니다.

마스터 페이지를 기존 ASP.NET 페이지에 바인딩

이 단계에서 보았듯이 ASP.NET 웹 애플리케이션에 새 콘텐츠 페이지를 추가하는 것은 "master 페이지 선택" 확인란을 선택하고 master 페이지를 선택하는 것만큼 쉽습니다. 아쉽게도 기존 ASP.NET 페이지를 master 페이지로 변환하는 것은 쉽지 않습니다.

기존 ASP.NET 페이지에 master 페이지를 바인딩하려면 다음 단계를 수행해야 합니다.

  1. MasterPageFile 특성을 ASP.NET 페이지의 @Page 지시문에 추가하여 적절한 master 페이지를 가리킵니다.
  2. master 페이지의 각 ContentPlaceHolders에 대한 콘텐츠 컨트롤을 추가합니다.
  3. ASP.NET 페이지의 기존 콘텐츠를 적절한 콘텐츠 컨트롤에 선택적으로 잘라내어 붙여넣습니다. ASP.NET 페이지에 , 요소 및 웹 양식과 같은 DOCTYPE<html> master 페이지에서 이미 표현한 태그가 포함되어 있기 때문에 여기서는 "선택적으로"라고 말합니다.

스크린샷과 함께 이 프로세스에 대한 단계별 지침은 Scott Guthrie의 마스터 페이지 및 사이트 탐색 사용 자습서를 검사. "마스터 페이지 업데이트 Default.aspx 및 DataSample.aspx 사용" 섹션에서는 이러한 단계를 자세히 설명합니다.

기존 ASP.NET 페이지를 콘텐츠 페이지로 변환하는 것보다 새 콘텐츠 페이지를 만드는 것이 훨씬 쉽기 때문에 새 ASP.NET 웹 사이트를 만들 때마다 사이트에 master 페이지를 추가하는 것이 좋습니다. 모든 새 ASP.NET 페이지를 이 master 페이지에 바인딩합니다. 초기 master 페이지가 매우 간단하거나 평범한지 걱정하지 마세요. 나중에 master 페이지를 업데이트할 수 있습니다.

참고

새 ASP.NET 애플리케이션을 만들 때 Visual Web Developer는 master 페이지에 바인딩되지 않은 페이지를 추가합니다Default.aspx. 기존 ASP.NET 페이지를 콘텐츠 페이지로 변환하는 방법을 연습하려면 으로 이동합니다 Default.aspx. 또는 삭제 Default.aspx 한 다음 다시 추가할 수 있지만 이번에는 "master 페이지 선택" 확인란을 선택합니다.

3단계: 마스터 페이지의 태그 업데이트

master 페이지의 주요 이점 중 하나는 사이트의 여러 페이지에 대한 전체 레이아웃을 정의하는 데 단일 master 페이지를 사용할 수 있다는 것입니다. 따라서 사이트의 모양과 느낌을 업데이트하려면 단일 파일인 master 페이지를 업데이트해야 합니다.

이 동작을 설명하기 위해 왼쪽 열의 맨 위에 현재 날짜를 포함하도록 master 페이지를 업데이트해 보겠습니다. 라는 DateDisplay 레이블을 에 추가합니다 leftContent<div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

다음으로, master 페이지에 대한 이벤트 처리기를 만들고 Page_Load 다음 코드를 추가합니다.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

위의 코드는 Label의 Text 속성을 요일, 월 이름 및 두 자리 날짜로 형식이 지정된 현재 날짜 및 시간으로 설정합니다(그림 11 참조). 이 변경 내용으로 콘텐츠 페이지 중 하나를 다시 방문합니다. 그림 11에서 보여 주듯이 결과 태그는 master 페이지에 대한 변경 사항을 포함하도록 즉시 업데이트됩니다.

마스터 페이지의 변경 내용은 콘텐츠 페이지를 볼 때 반영됩니다.

그림 11: 콘텐츠 페이지를 볼 때 마스터 페이지의 변경 내용이 반영됩니다(전체 크기 이미지를 보려면 클릭).

참고

이 예제에서 알 수 있듯이 master 페이지에는 서버 쪽 웹 컨트롤, 코드 및 이벤트 처리기가 포함될 수 있습니다.

요약

마스터 페이지를 사용하면 ASP.NET 개발자가 쉽게 업데이트할 수 있는 일관된 사이트 전체 레이아웃을 디자인할 수 있습니다. Visual Web Developer가 풍부한 디자인 타임 지원을 제공하므로 master 페이지 및 관련 콘텐츠 페이지를 만드는 것은 표준 ASP.NET 페이지를 만드는 것만큼 간단합니다.

이 자습서에서 만든 master 페이지 예제에는 두 개의 ContentPlaceHolder 컨트롤인 head 및 MainContent가 있습니다. 그러나 콘텐츠 페이지에서 MainContent ContentPlaceHolder 컨트롤에 대한 태그만 지정했습니다. 다음 자습서에서는 콘텐츠 페이지에서 여러 콘텐츠 컨트롤을 사용하는 것을 살펴봅니다. master 페이지 내에서 콘텐츠 컨트롤에 대한 기본 태그를 정의하는 방법과 master 페이지에 정의된 기본 태그를 사용하고 콘텐츠 페이지에서 사용자 지정 태그를 제공하는 방법 간에 전환하는 방법도 알아봅니다.

행복한 프로그래밍!

추가 정보

이 자습서에서 설명하는 topics 대한 자세한 내용은 다음 리소스를 참조하세요.

저자 정보

여러 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 설립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 사용하고 있습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 3.5 24 시간. Scott은 에서 mitchell@4GuysFromRolla.com 또는 에서 자신의 블로그 http://ScottOnWriting.NET를 통해 연락할 수 있습니다.

특별 감사

예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.

이전다음