연습: ASP.NET에서 중첩된 마스터 페이지 사용

아티클
08/20/2008

업데이트: 2007년 11월

이 연습에서는 다른 마스터 페이지 내에 중첩된 마스터 페이지를 만드는 방법에 대해 설명합니다. 마스터 페이지는 페이지의 모양을 지정하는 템플릿 역할을 합니다.

각 페이지가 레이아웃이 유연하면서도 웹 사이트에서 일관된 모양을 유지할 수 있도록 마스터 페이지를 중첩할 수 있습니다. 예를 들어 맨 위에 회사 배너가 있고 측면 열에 사이트 탐색 컨트롤이 있는 부모 마스터 페이지를 만들 수 있습니다. 그런 다음 부모 마스터 페이지를 사용하는 특정 부서 또는 제품에 대해 자식 마스터 페이지를 만들 수 있습니다. 또한 이 자식 마스터 페이지는 다른 모든 관련 부서 또는 제품 페이지에 대해 마스터 페이지 역할을 할 수 있습니다. 이러한 방식으로 각 제품 라인 또는 부서는 일관된 모양을 가지게 되고 모든 페이지가 부모 마스터 페이지를 사용함으로써 전체적으로 모양이 일정하게 됩니다. 마스터 페이지에 대한 자세한 내용은 ASP.NET 마스터 페이지 개요를 참조하십시오.

이 연습에서는 다음 작업을 수행합니다.

마스터 페이지 만들기
다른 마스터 페이지 내에 중첩된 마스터 페이지를 만들기
마스터 페이지에 표시할 콘텐츠가 있는 ASP.NET 페이지 만들기

사전 요구 사항

이 연습을 완료하려면 다음이 필요합니다.

Visual Studio 2008 또는 Microsoft Visual Web Developer Express Edition 다운로드 정보는 Visual Studio Developer Center 웹 사이트를 참조하십시오.
.NET Framework 버전 3.5
마스터 페이지에서 배너로 사용할 수 있는 .jpg, .gif 또는 기타 그래픽 파일입니다. 배너의 너비는 780픽셀, 높이는 150픽셀 이하인 것이 좋습니다. 그러나 로고 표시는 선택 사항이며 그래픽의 정확한 크기는 이 연습에서 중요하지 않습니다.

웹 사이트 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 작업한 경우를 비롯하여 Visual Web Developer에서 웹 사이트를 이미 만든 경우 해당 웹 사이트를 사용하고 다음 단원인 "마스터 페이지 만들기"로 이동할 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어 C:\Tasks와 같이 입력할 수 있습니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.

Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다.

부모 마스터 페이지 만들기

이 단원에서는 부모 마스터 페이지를 만듭니다. 이 페이지에는 사이트 전체에서 사용할 수 있는 배너와 탐색 컨트롤이 포함되어 있습니다. 또한 나중에 이 부모 마스터 페이지 내에 사용할 다른 마스터 페이지를 만들게 됩니다. 자식 마스터 페이지에서는 부모 마스터 페이지에 설정된 모양을 유지하면서 다양한 페이지 레이아웃을 제공할 수 있습니다.

마스터 페이지를 만들려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.

새 항목추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 마스터 페이지를 클릭합니다.
이름 상자에 ParentMaster를 입력합니다.
다른 파일에 코드 입력 확인란의 선택을 취소합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
추가를 클릭합니다.

새 마스터 페이지가 소스 뷰에서 열립니다.

부모 마스터 페이지에 요소 추가

마스터 페이지의 맨 위에는 ASP.NET 페이지의 맨 위에서 일반적으로 볼 수 있는 @ Page 선언 대신 @ Master 선언이 있습니다. 페이지 본문에는 런타임에 콘텐츠 페이지의 대체 가능한 콘텐츠가 병합될 마스터 페이지 영역인 ContentPlaceHolder 컨트롤이 있습니다. 이 연습의 뒷부분에서 콘텐츠 자리 표시자로 추가 작업을 수행합니다.

부모 마스터 페이지에 그래픽 추가

부모 마스터 페이지에 그래픽을 통합하려면 먼저 그래픽 파일을 웹 사이트에 추가해야 합니다.

너비가 780픽셀이고 높이가 150픽셀인 그래픽을 배너로 만들고 너비가 780픽셀이고 높이가 50픽셀인 그래픽을 바닥글로 만듭니다. 이러한 그래픽은 부모 마스터 페이지의 그래픽이 중첩된 마스터 페이지에서 어떻게 나타나는지를 보여 주는 데 사용됩니다. 이러한 그래픽이 없는 경우 Microsoft 그림판 또는 다른 그래픽 프로그램에서 만들 수 있습니다.

기존 그래픽 파일을 웹 사이트에 추가하려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 기존 항목추가를 클릭합니다.

기존 항목 추가 대화 상자가 표시됩니다.
만든 그래픽 파일을 선택합니다.
추가를 클릭합니다.

부모 마스터 페이지에서 각각 배너와 바닥글에 사용할 두 개의 간단한 그래픽을 추가합니다. 이러한 그래픽을 사용하면 이 연습의 뒷부분에서 만들 중첩된 마스터 페이지에서 부모 마스터 페이지가 사용되는 모습을 확인할 수 있습니다.

배너 및 바닥글 그래픽을 부모 마스터 페이지에 추가하려면

소스 뷰에서 여는 <form> 태그 바로 뒤에 배너 그래픽에 대한 img 요소가 들어 있는 div 요소를 추가합니다.

예를 들어 Banner.gif라는 그래픽을 만든 경우 이 그래픽을 추가할 태그는 다음과 같습니다.
```
<div id="banner">
  <img src="banner.gif" alt="banner graphic" />
</div>
```
닫는 </form> 태그 바로 앞에 바닥글 그래픽에 대한 img 요소가 들어 있는 div 요소를 추가합니다.

예를 들어 Footer.gif라는 그래픽을 만든 경우 이 그래픽을 추가할 태그는 다음과 같습니다.
```
<div id="banner">
  <img src="footer.gif" alt="footer graphic" />
</div>
```
마스터 페이지를 저장합니다.

ContentPlaceHolder 컨트롤 내에는 아무 것도 추가하지 않았습니다. 다음에 마스터 페이지 집합을 만들면 ContentPlaceHolder 컨트롤 내에 포함됩니다.

자식 마스터 페이지 만들기

한 마스터 페이지를 다른 마스터 페이지 내에 중첩하려면 다른 마스터 페이지를 만들어야 합니다. 새 마스터 페이지는 부모 마스터 페이지의 콘텐츠 자리 표시자 내에 포함됩니다. 자식 마스터 페이지를 사용하면 부모 마스터 페이지에 설정된 일관된 모양을 유지하면서 페이지를 다양한 방식으로 정렬할 수 있습니다.

자식 마스터 페이지를 만들려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.

새 항목 추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 마스터 페이지를 클릭합니다.
이름 상자에 ChildMaster를 입력합니다.
다른 파일에 코드 입력 확인란의 선택을 취소합니다.
마스터 페이지 선택 확인란을 선택합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
추가를 클릭합니다.

마스터 페이지 선택 대화 상자가 표시됩니다.
이 연습의 앞부분에서 만든 부모 마스터 페이지를 선택합니다.
확인을 클릭합니다.

새 마스터 페이지가 소스 뷰에서 열립니다.

새 마스터 페이지의 맨 위에 있는 @ Master 선언은 마스터 페이지를 참조한다는 것을 나타냅니다.

ContentPlaceHolder 컨트롤을 자식 마스터 페이지에 추가

자식 마스터 페이지는 다른 마스터 페이지와 연결되어 있기 때문에 두 개의 Content 컨트롤이 있습니다. 첫 번째 콘텐츠 자리 표시자는 일반적으로 script 요소 같은 head 요소에 나타나는 정보를 페이지에 추가하는 데 사용할 수 있습니다. 두 번째 Content 컨트롤 내에는 ContentPlaceHolder 컨트롤을 추가할 수 있습니다. 이렇게 하면 자식 마스터 페이지를 사용하는 ASP.NET 페이지에서 페이지의 콘텐츠를 제공할 수 있습니다. Content 컨트롤 내에 다른 페이지 요소를 추가할 수도 있습니다. 자식 마스터 페이지에는 자식 마스터 페이지를 사용하는 페이지에 대해 일관된 모양을 제공하는 추가 페이지 요소가 포함될 수 있습니다.

ContentPlaceholder 컨트롤을 자식 마스터 페이지에 추가하려면

자식 마스터 페이지를 열거나 이 페이지로 전환합니다.
소스 뷰로 전환합니다.

ContentPlaceHolder 컨트롤을 만들려면 두 번째 Content 컨트롤 섹션 내에 다음 태그를 추가합니다.

<div id="2col">
  <asp:ContentPlaceHolder ID="leftcolumn" >
  </asp:ContentPlaceHolder>
  <asp:ContentPlaceHolder ID="rightcolumn" >
  </asp:ContentPlaceHolder>
</div>

파일을 저장합니다.

이제 자식 마스터 페이지에 해당 자식 마스터 페이지를 사용하는 ASP.NET 페이지의 태그가 들어 있는 ContentPlaceHolder 컨트롤이 포함됩니다.

자식 마스터 페이지를 사용하는 콘텐츠 페이지 만들기

이전 단계에서는 다른 마스터 페이지 내에 중첩된 마스터 페이지를 만들었습니다. 그 결과 만들어진 자식 마스터 페이지를 사용하면 부모 마스터 페이지의 UI 요소를 사용할 수 있습니다. 또한 두 번째 마스터 페이지에 추가 UI 요소가 제공됩니다. 이 연습에서는 두 번째 마스터 페이지의 부모 마스터 페이지 및 자리 표시자에 그래픽을 추가했습니다. 실행 중인 중첩된 마스터 페이지를 확인하려면 자식 마스터 페이지를 사용하는 ASP.NET 웹 페이지를 만들어야 합니다. 자식 마스터 페이지를 사용하는 새로 만든 페이지에는 해당 자식 마스터 페이지에 만든 각 ContentPlaceHolder 컨트롤에 대한 Content 컨트롤이 자동으로 포함됩니다.

자식 마스터 페이지를 사용하는 페이지를 만들려면

솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.

새 항목 추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 Tasks를 입력합니다.
다른 파일에 코드 입력 확인란을 선택합니다.
마스터 페이지 선택 확인란을 선택합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
추가를 클릭합니다.
마스터 페이지 선택 대화 상자에서 이 연습의 앞부분에서 만든 자식 마스터 페이지를 선택합니다.
확인을 클릭합니다.

새 콘텐츠 페이지가 소스 뷰에서 열립니다.
첫 번째 Content 컨트롤의 ID를 leftcolumn으로 변경하고 두 번째 Content 컨트롤의 ID를 rightcolumn으로 변경합니다.
왼쪽 또는 오른쪽 열의 Content 컨트롤에 텍스트 또는 페이지 요소를 추가합니다.
Ctrl+F5를 눌러 웹 사이트를 실행합니다.

Tasks.aspx 페이지에 이 연습에서 만든 모든 요소의 조합이 표시됩니다. 여기에는 부모 마스터 페이지의 그래픽, 자식 마스터 페이지의 2열 레이아웃, Tasks.aspx 페이지에 추가한 텍스트 및 컨트롤이 포함됩니다.

다음 단계

지금까지 중첩된 페이지가 작동하는 방식을 살펴보았으므로 이제 부모 마스터 페이지를 사용하는 다른 마스터 페이지를 만들 수 있습니다. 이 연습에서 만든 자식 마스터 페이지에서는 2열 레이아웃을 만들었습니다. 부모 마스터 페이지에 대해 만드는 다른 자식 마스터 페이지에는 1열 레이아웃이나 다른 특정 레이아웃을 만들 수도 있습니다.

참고 항목

작업

연습: CSS 파일 만들기 및 수정

다음을 통해 공유