이번 강좌에서는 ASP.NET1.X 마스터(템플릿) 페이지 작성하기란 주제를 설명드리기로 하겠습니다.
ASP.NET 마스터(템플릿) 페이지란, 각각의 웹 폼에서 매번 공통적으로 들어가는 네비게이터, 카테고리, 카파라이트 등의 정보를 한번만 작성하고,
각각의 페이지에 손쉽게 적용할 수 있는 방식으로 기존 ASP3.0 시절의 SSI 기능이
ASP.NET에서는 웹 사용자 정의 컨트롤(ASCX)로 대체되었습니다.
이 때 ASP.NET의 웹 사용자 정의 컨트롤을 사용하여 템플릿 처리를 하는 내용은 아래와
같은 순서를 따르면 됩니다.
1. 일단은 템플릿 페이지를 아래와 같이 작성합니다.
Template.htm
---------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<LINK href="Global.css" type="text/css" rel="stylesheet">
</head>
<body>
<table border="0" width="570" align="center" cellspacing="1" bgcolor="silver">
<tr>
<td colspan="2" bgcolor="white">네비게이터</td>
</tr>
<tr>
<td width="100" height="100" bgcolor="white">카테고리</td>
<td bgcolor="white">컨텐트</td>
</tr>
<tr>
<td colspan="2" bgcolor="white">카피라이트</td>
</tr>
</table>
</body>
</html>
2. 위 템플릿 파일과 같은 경로에 웹 사용자 정의 컨트롤을 4개 추가합니다.
a. Navigator.ascx
b. Category.ascx
c. Catalog.ascx
d. Copyright.ascx
3. Template.htm 파일을 솔루션 탐색기에서 Ctrl+C, Ctrl+V 단축키를 이용해서, 사본을 만든 후,
해당 사본 파일의 확장자를 ascx로 변경합니다.
예를 들면, [사본 - Template.htm] -> [Template.aspx]로 변경합니다. 이어서 나타나는 경고창에 예를 클릭하여 관련 클래스 파일(코드 비하인드 페이지)을 작성합니다
4. 완성된 Template.aspx에 Form 태그를 Body 태그 안쪽으로 추가합니다.(없을 경우...)
5. Template.aspx의 각각의 4가지 영역(네비게이터, 카테고리, 카탈로그, 카피라이트)에 4가지 웹 사용자 정의 컨트롤을 떨어뜨려 놓습니다.
위 5번까지 순서대로 따라한 후의 Template.aspx의 소스 보기 부분을 보면 아래와 같습니다.
Template.aspx
---------------------------------------------------------------------
<%@ Page CodeBehind="Template.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="MiniHome.Template" %>
<%@ Register TagPrefix="uc1" TagName="Navigator" Src="Navigator.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Category" Src="Category.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Catalog" Src="Catalog.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Copyright" Src="Copyright.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<LINK href="Global.css" type="text/css" rel="stylesheet">
</HEAD>
<body leftmargin="0" topmargin="0">
<form id="TemplateForm" runat="server">
<table border="0" width="570" align="center" cellspacing="1" bgcolor="silver">
<tr>
<td colspan="2" bgcolor="white">
<uc1:Navigator id="Navigator1" runat="server"></uc1:Navigator></td>
</tr>
<tr>
<td width="100" height="100" bgcolor="white">
<uc1:Category id="Category1" runat="server"></uc1:Category></td>
<td bgcolor="white" width="470">
<uc1:Catalog id="Catalog1" runat="server"></uc1:Catalog></td>
</tr>
<tr>
<td colspan="2" bgcolor="white"><uc1:Copyright id="Copyright1" runat="server"></uc1:Copyright></td>
</tr>
</table>
</form>
</body>
</HTML>
위와 같은 모양으로 페이지가 완성되면 일차적으로 템플릿 페이지(ASP.NET2.0의 마스터 페이지 격)가
완성되었습니다.
그러면, 기존에 만들어 놓은 모듈(순수한 게시판, 방명록, 자료실...)에 위 템플릿과 같은 모양에
카탈로그 영역에 위치하고자 한다면, 아래와 같이 Template.aspx를 2개의 웹 사용자 정의 컨트롤로
쪼개야 합니다.
1. Template.aspx와 같은 경로에 Top.ascx와 Bottom.ascx 파일을 만듭니다.
2. Template.aspx의 소스 보기 부분의 코드 중에서 카탈로그(실제 콘텐츠 영역)를 기준으로 상단 태그 부분을 복사해서 Top.ascx 파일에 붙여넣기 합니다. 이 때 주의할 경우에는 [디자이너 보기]로 갔다가 오면 미완성된 태그를 자동으로 만들어줍니다. VS2003의 단점이지요...
완성된 Top.ascx 파일의 소스 보기 부분은 아래와 비슷합니다.
Top.ascx
--------------------------------------------------------------
<%@ Register TagPrefix="uc1" TagName="Category" Src="Category.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Navigator" Src="Navigator.ascx" %>
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Top.ascx.cs" Inherits="MiniHome.Top" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table border="0" width="570" align="center" cellspacing="1" bgcolor="silver">
<tr>
<td colspan="2" bgcolor="white">
<uc1:Navigator id="Navigator1" runat="server"></uc1:Navigator></td>
</tr>
<tr>
<td width="100" height="100" bgcolor="white">
<uc1:Category id="Category1" runat="server"></uc1:Category></td>
<td bgcolor="white" width="470" valign="top">
반드시 위와 같이 Register 지시문을 같이 따라와야 합니다
3. Top.ascx와 마찬가지로 이번에는 카탈로그 영역을 기준으로 하단 태그를 Register 문과 함께 복사하여
Bottom.ascx 파일에 붙여넣기 합니다.
완성된 Bottom.ascx 파일의 소스 보기 부분은 아래와 비슷합니다.
Bottom.ascx
--------------------------------------------------------------
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Bottom.ascx.cs" Inherits="MiniHome.Bottom" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Register TagPrefix="uc1" TagName="Copyright" Src="Copyright.ascx" %>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="white"><uc1:Copyright id="Copyright1" runat="server"></uc1:Copyright></td>
</tr>
</table>
위와 같이
Template.htm -> Template.aspx
Template.aspx에 Navigator.ascx/Category.ascx/Catalog.ascx/Copyright.ascx 파일을 포함
Template.aspx를 Top.ascx와 Bottom.ascx로 쪼개고 나면, 새로운 모듈에 2개의 사용자 정의 컨트롤을 떨어뜨려 놓기만 하면 템플릿 페이지 작성이 끝납니다.
4. 사이트의 메인페이지 또는 게시판의 리스트 페이지가 완성이 되었다면, 아래와 같이 템플릿을 적용하여, 손쉽게 웹 사이트 전체의 레이아웃을 설정할 수 있습니다.
Default.aspx
------------------------------------------------------
<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="MiniHome._Default" %>
<%@ Register TagPrefix="uc1" TagName="Top" Src="Top.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Catalog" Src="Catalog.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Bottom" Src="Bottom.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Default</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link rel="stylesheet" href="/MiniHome/Global.css" type="text/css">
<style type="text/css">
body, td, input, textarea, p, b,
select, option, u, i
{
font-size:11px;
font-family:Verdana;
color:Navy;
}
</style>
</HEAD>
<body MS_POSITIONING="FlowLayout" leftmargin="0" topmargin="0">
<form id="Form1" method="post" runat="server">
<uc1:Top id="Top1" runat="server"></uc1:Top>
<uc1:Catalog id="Catalog1" runat="server"></uc1:Catalog>
<uc1:Bottom id="Bottom1" runat="server"></uc1:Bottom>
</form>
</body>
</HTML>
게시판의 리스트 페이지 : List.aspx
------------------------------------
<%@ Page language="c#" Codebehind="List.aspx.cs" AutoEventWireup="false" Inherits="Basic.Basic.List" %>
<%@ Register TagPrefix="uc1" TagName="Top" Src="../Top.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Bottom" Src="../Bottom.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>List</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="../Global.css" type="text/css" rel="stylesheet">
<LINK href="Basic.css" type="text/css" rel="stylesheet">
</HEAD>
<body leftMargin="0" topMargin="0" MS_POSITIONING="FlowLayout">
<form id="List" method="post" runat="server">
<uc1:Top id="Top1" runat="server"></uc1:Top>
####여기가 게시판 리스트 페이지 내용####
<uc1:Bottom id="Bottom1" runat="server"></uc1:Bottom>
</form>
</body>
</HTML>
마지막으로 위와 같은 방법을 사용하면 좋은 점은
기존이 모듈 제작은 모듈대로 열심히 작업을 하고나서,
마지막으로 최종 배포하기 전에 각각의 ASPX 페이지의 제일 상단에 Top.ascx 파일을
제일 하단에 Bottom.ascx파일을 떨어뜨려 놓으면 카탈로그(콘텐츠) 영역에서
해당 모듈이 실행되어 전체 레이아웃을 손쉽게 가져갈 수 있는 장점이 있습니다.
이와 같은 방법은 ASP.NET 2.0에서는 마스터 페이지로 대체되어서 2.0에서는 크게 쓸일이 없겠지만,
ASP.NET1.X 버전에서는 템플릿(마스터 페이지)을 처리하는 효과적인 방법 중 하나일테니,
각자의 스타일대로 적용해 보시면 좋을 듯 합니다.
실제로 위와 같은 템플릿 처리에 대한 내용은 직접 진행하면 5분도 채 걸리지 않는 내용이지만, 글로 표현하다보니, 꽤 긴 문장이 되었습니다.
각자 한 두번 연습해 보시면, 템플릿 처리할 때 도움이 될 듯 합니다.