9. 웹 폼 사용자 정의 컨트롤과 마스터 페이지

4/11/2024
26 minutes to read

웹 페이지 제작 시 반복 사용되는 부분 페이지를 웹 폼 사용자 정의 컨트롤을 통해 재사용 가능하게 만들 수 있습니다. 이와 함께 마스터 페이지를 사용하면 전체 웹 사이트의 페이지 레이아웃을 한 곳에서 관리할 수 있어 개발의 효율성을 높일 수 있습니다.

9.1. ASP.NET 템플릿

9.1.1. Visual Studio에 설치되어 있는 템플릿

Visual Studio를 사용해 웹 사이트를 만든 후, 해당 웹 사이트에서 마우스 오른쪽 버튼을 클릭하고 <추가 > 새 항목> 메뉴를 선택하면, 웹 사이트에 다양한 항목들을 추가할 수 있습니다. 이러한 항목들은 설치된 템플릿이라고 하며, Visual Studio에는 웹 폼, 마스터 페이지, 웹 사용자 정의 컨트롤(ASCX), 스킨 파일(Skin) 등 다양한 템플릿이 설치되어 있습니다.

그림 9 1 웹 사이트에 새 항목 추가

9.1.2. ASP.NET에서 특별히 사용하는 폴더

ASP.NET에서는 특별히 사용되는 몇 가지 폴더가 있습니다. 이들 폴더는 다음과 같습니다:

App_Code: 클래스 파일 저장.
App_GlobalResources: 전체 웹 사이트에서 사용되는 리소스 파일 저장.
App_LocalResources: 각 웹 페이지에서 사용되는 리소스 파일 저장.
App_Data: 데이터베이스와 XML 등의 데이터 파일 저장.
App_Browsers: 브라우저 관련 정보 저장.
테마(Themes): 서버 컨트롤의 스타일 정의 파일 저장.

웹 프로젝트에 새로운 ASP.NET 폴더를 추가하려면, 마우스 오른쪽 버튼 클릭 후 <추가 > ASP.NET 폴더 추가> 메뉴를 선택하면 됩니다.

그림 9 2 ASP.NET 폴더 추가

9.2. ASP.NET 웹 폼 사용자 정의 컨트롤

9.2.1. 웹 폼 사용자 정의 컨트롤이란?

웹 폼 사용자 정의 컨트롤은 웹 페이지에서 반복 사용되는 부분을 별도의 파일(ASCX)로 구성하여 재사용하게 하는 기술입니다. 이는 웹 폼 페이지(ASPX 파일)와 비교하여, 웹 폼에 포함될 부분 페이지를 나타냅니다. 웹 사용자 정의 컨트롤은 단독으로 실행되지 않으며 반드시 웹 폼에서 실행되어야 합니다.

그림 9 3 웹 폼 사용자 정의 컨트롤 설명

9.2.2. ASP.NET 템플릿 페이지

ASP.NET 템플릿 페이지는 웹 페이지에 공통적으로 포함되는 내비게이터, 카테고리, 카탈로그, 카피라이트 등의 정보를 한 번만 작성하여 각 페이지에 쉽게 적용할 수 있는 방식을 말합니다. 이는 과거 서버 사이드 인클루드(SS) 기능을 ASP.NET에서 웹 사용자 정의 컨트롤로 발전시킨 것입니다.

9.3 [실습] 웹 폼 사용자 정의 컨트롤을 사용한 웹 사이트 뼈대 만들기

9.3.1 소개

이번 실습을 통해, 웹 사이트에서 공통으로 사용되는 페이지의 내용을 웹 폼 사용자 정의 컨트롤로 분리하여, 여러 페이지에 걸쳐 한 번에 적용할 수 있는 부분 페이지 개념을 학습합니다.

참고:

이 실습에 대한 자세한 내용은 "ASP.NET 웹폼 - 웹 폼 사용자 정의 컨트롤" 제목의 동영상 강좌를 참고하세요.

동영상 강좌 링크

9.3.2 따라하기

Visual Studio 실행 및 ASP.NET 웹 응용 프로그램 생성:
- 이름: DevUserControl
- 위치: C:\ASP.NET
- ASP.NET 템플릿 선택: ASP.NET 4.6 템플릿-Empty
- 폴더 및 핵심 참조 추가: Web Forms
Bootstrap 추가: 솔루션 탐색기에서 생성된 프로젝트를 선택한 후, Visual Studio의 <도구 > NuGet 패키지 관리자 > 패키지 관리자 콘솔>을 선택하여 패키지 관리자 콘솔 창을 실행하고, 다음 명령어를 입력합니다. 이 과정을 통해 프로젝트에 Bootstrap 관련 스타일시트, 스크립트, 이미지, 폰트 등이 추가됩니다.

그림 9 4 Bootstrap 추가하기

Bootstrap이 추가된 후의 솔루션 탐색기 모습은 다음과 같습니다. (참고: 버전은 계속해서 업데이트되므로, 최신 버전을 사용하세요.)

그림 9 5 Bootstrap 관련 리소스 추가된 상태

웹 폼 및 웹 폼 사용자 정의 컨트롤 추가: DevUserControl 웹 프로젝트에 웹 폼 및 웹 폼 사용자 정의 컨트롤을 다음과 같이 추가합니다. 파일명을 구별하기 위해 UserControl 접미사를 사용했습니다.

템플릿 이름	이름
웹 폼	FrmUserControl.aspx
웹 폼 사용자 정의 컨트롤	NavigatorUserControl.ascx
웹 폼 사용자 정의 컨트롤	CategoryUserControl.ascx
웹 폼 사용자 정의 컨트롤	CatalogUserControl.ascx
웹 폼 사용자 정의 컨트롤	CopyrightUserControl.ascx

웹 폼 사용자 정의 컨트롤 코드 입력: 각 웹 폼 사용자 정의 컨트롤 파일을 열고, 다음과 같이 코드를 입력합니다.

NavigatorUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NavigatorUserControl.ascx.cs" Inherits="DevUserControl.NavigatorUserControl" %>
<h3>내비게이터 들어오는 곳</h3>

CategoryUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CategoryUserControl.ascx.cs" Inherits="DevUserControl.CategoryUserControl" %>
카테고리 들어오는 곳

CatalogUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CatalogUserControl.ascx.cs" Inherits="DevUserControl.CatalogUserControl" %>
카탈로그(Content) 들어오는 곳

CopyrightUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CopyrightUserControl.ascx.cs" Inherits="DevUserControl.CopyrightUserControl" %>
<div class="text-center">
카피라이트 들어오는 곳
</div>

FrmUserControl.aspx은 앞의 페이지 네 개를 조립하여 페이지 하나로 실행할 메인 페이지입니다. 파일을 열고 다음과 같이 코드를 입력합니다. Bootstrap의 기능을 사용하여 간단히 레이아웃을 구성하였습니다. Bootstrap 포함 경로는 NuGet 패키지 관리자에 의해서 자동으로 생성된 Content 폴더 경로를 설정했습니다.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="FrmUserControl.aspx.cs" 
    Inherits="DevUserControl.FrmUserControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>웹 사이트 뼈대 만들기</title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            내비게이터 들어오는 곳
        </div>
    </div>
    <div class="row" style="height:200px;">
        <div class="col-md-3">
            카테고리 들어오는 곳
        </div>
        <div class="col-md-9">
            카탈로그(Content) 들어오는 곳
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            카피라이트 들어오는 곳
        </div>
    </div>
</div>
</form>
</body>
</html>

FrmUserControl.aspx 페이지 영역 네 군데에 앞서 작업한 웹 폼 사용자 정의 컨트롤 네 개를 등록합니다. 솔루션 탐색기에서 마우스로 선택한 후 마우스 끌어 놓기로 웹 폼의 적절한 위치에 등록할 수 있습니다. 내비게이터를 예로 들면 “내비게이터 들어오는 곳” 텍스트를 지우고, 솔루션 탐색기에서 NavigatorUserControl.ascx 파일을 드래그하여 텍스트 있던 곳에 떨어뜨려 놓는다. 다음 코드 전체를 직접 타이핑해도 되지만, ASCX 파일을 드래그해서 특정 소스 영역에 드롭하면 페이지 상단에 Register 지시문이 자동으로 추가되며 해당 영역에서 부분 페이지가 실행됩니다. 다음 코드는 웹 폼에 웹 폼 사용자 정의 컨트롤 네 개가 등록된 후의 모습을 보여줍니다. 테두리를 빨간색으로 강조하는 스타일시트 코드를 추가했습니다. 각각의 웹 폼 사용자 정의 컨트롤 포함 시 Src 속성의 경로는 현재는 프로젝트 루트 경로를 사용하였지만, 만약 같은 경로에 있는 파일을 포함하려면 ~/ 대신에 ./ 를 사용하면 됩니다.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="FrmUserControl.aspx.cs" 
    Inherits="DevUserControl.FrmUserControl" %>

<%@ Register Src="~/NavigatorUserControl.ascx"
    TagPrefix="uc1" TagName="NavigatorUserControl" %>
<%@ Register Src="~/CategoryUserControl.ascx"
    TagPrefix="uc1" TagName="CategoryUserControl" %>
<%@ Register Src="~/CatalogUserControl.ascx"
    TagPrefix="uc1" TagName="CatalogUserControl" %>
<%@ Register Src="~/CopyrightUserControl.ascx"
    TagPrefix="uc1" TagName="CopyrightUserControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>웹 사이트 뼈대 만들기</title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <style>
        div {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <uc1:NavigatorUserControl runat="server" ID="NavigatorUserControl" />
        </div>
    </div>
    <div class="row" style="height: 200px;">
        <div class="col-md-3">
            <uc1:CategoryUserControl runat="server" ID="CategoryUserControl" />
        </div>
        <div class="col-md-9">
            <uc1:CatalogUserControl runat="server" ID="CatalogUserControl" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <uc1:CopyrightUserControl runat="server" ID="CopyrightUserControl" />
        </div>
    </div>
</div>
</form>
</body>
</html>

웹 폼에 웹 폼 사용자 정의 컨트롤 등록시 Register 지시문은 자동으로 생성됩니다. 위 소스 내용 그대로 경로를 잘 맞춰 타이핑해도 결과는 같습니다.

FrmUserControl.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 페이지 하나에 부분 페이지 네 개가 합쳐져 출력됩니다. 만약 내비게이터 부분만 수정하려면 다른 페이지는 건드릴 필요 없이 NavigatorUserControl.ascx 파일만 수정한 후 다시 실행하면 전체가 변경됩니다. 이처럼 웹 사이트의 여러 곳에서 사용될 만한 부분을 웹 폼 사용자 정의 컨트롤로 만들어 재사용성을 높인다. 그림 9 6 웹 폼 사용자 정의 컨트롤이 포함된 웹 폼 실행 결과

9.3.3 마무리

이 실습은 여러 단계로 구성되어 있으며, 반복 연습을 통해 웹 페이지 제작 시 페이지의 공통 내용을 효율적으로 관리하는 방법을 익힐 수 있습니다. 다음 실습은 웹 사이트 구성에 있어 더욱 향상된 기능을 구현하는 데 도움을 줄 것입니다.

9.4 ASP.NET 마스터 페이지

9.4.1 마스터 페이지란?

마스터 페이지는 웹 페이지 전체에 공통적으로 사용되는 뼈대를 구성하는 기능으로, ASP.NET 2.0부터 도입되었습니다. 이는 웹 사이트의 레이아웃을 일관되게 유지하여 사용자에게 일관된 룩앤필(Look & Feel)을 제공합니다. 마스터 페이지는 반복적으로 사용되는 UI를 위한 템플릿을 제공하여 HTML 작업의 반복을 줄이고, 한 번의 작업으로 여러 번 재사용할 수 있는 레이아웃을 구성할 수 있게 합니다. Classic ASP에서는 Include 개념을 사용했지만, ASP.NET에서는 웹 폼 사용자 컨트롤과 마스터 페이지를 통해 보다 쉽고 빠르게 공통 레이아웃 페이지를 구현할 수 있습니다.

9.4.1.1 ASP.NET 마스터페이지 텍스트 설명

ASP.NET의 마스터 페이지를 사용하면, 메뉴와 같은 공통적인 레이아웃을 한 곳에 보관하고, 이를 상속받는 각각의 ASPX 페이지들에서는 해당 페이지의 기능만을 구현할 수 있습니다. 마스터 페이지는 ASP.NET 웹 폼을 사용하여 웹 페이지 제작에서 필수 요소 중 하나입니다. 예를 들어, "Home", "일정관리", "게시판" 등의 메뉴를 클릭할 때마다 동일 메뉴와 레이아웃을 유지하면서 서로 다른 페이지의 내용을 보여줄 수 있습니다.

9.4.2 마스터 페이지의 처리 단계

마스터 페이지의 주요 기능을 살펴보면, a.master 파일에 전체 레이아웃을 만들고, a.aspx 페이지에는 콘텐츠 영역만 작업한 후, 실제로 실행되는 a.aspx 페이지에서는 전체적인 레이아웃과 콘텐츠 영역을 함께 출력하는 구조입니다.

그림 9 7 마스터 페이지 실행 구조

마스터 페이지는 확장자가 *.master이며, ASP.NET 웹 폼의 Page 지시문 대신 Master 지시문을 사용합니다. 다음은 마스터 페이지의 Master 지시문 예시입니다:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MemoEngine.Site" %>

마스터 페이지에는 HTML, BODY 등의 일반적인 태그와, 마스터 페이지를 상속받을 각각의 웹 폼 페이지에서 적용할 내용을 지정하는 ContentPlaceHolder 영역이 포함됩니다. 헤더, 메인, 푸터 영역의 태그 예시는 다음과 같습니다:

<asp:ContentPlaceHolder ID="HeaderContent" runat="server"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>

웹 폼 페이지에서 마스터 페이지를 적용할 때는 다음과 같이 MasterPageFile 속성을 사용하여 마스터 페이지의 경로를 지정합니다:

<%@ Page Title="메모엔진" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

각 페이지에서 사용되는 Content 영역의 구성 예시는 다음과 같습니다:

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"></asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server"></asp:Content>

9.4.3 중첩된 마스터 페이지

마스터 페이지는 중첩하여 사용할 수 있으며, 중첩된 마스터 페이지는 <디자인 보기>에서는 사용할 수 없고 <소스 보기>에서만 작업할 수 있습니다.

그림 9 8 중첩된 마스터 페이지

이러한 마스터 페이지와 관련된 태그 및 절차는 복잡해 보일 수 있지만, Visual Studio를 활용하면 어렵지 않게 구성할 수 있습니다.

9.5 [실습] 마스터 페이지를 사용한 웹 사이트 골격 구성하기

9.5.1 소개

이 실습에서는 웹 사이트에서 공통적으로 사용되는 레이아웃을 웹 폼 마스터 페이지로 만들고, 이를 매 페이지에 적용하는 방법을 배워보겠습니다.

9.5.2 따라하기

Visual Studio 실행 및 ASP.NET 웹 응용 프로그램 생성:
- 이름: DevMasterPage
- 위치: C:\ASP.NET
- ASP.NET 템플릿 선택: ASP.NET 4.6 템플릿-Empty
- 폴더 및 핵심 참조 추가: Web Forms
Bootstrap 추가: 솔루션 탐색기에서 프로젝트를 선택 후, Visual Studio의 <도구 > NuGet 패키지 관리자> 패키지 관리자 콘솔>을 통해 패키지 관리자 콘솔 창을 열고, Bootstrap 관련 라이브러리를 추가합니다.

그림 9 9 Bootstrap 추가하기

웹 폼 마스터 페이지 및 스타일 시트 추가:

템플릿 이름: 웹 폼 마스터 페이지, 이름: Site.Master
스타일 시트(CSS), 이름: /Content/Site.css

기본 제공되는 마스터 페이지 태그 예시:

<%@ Master Language="C#" AutoEventWireup="true"
    CodeBehind="Site.master.cs" Inherits="DevMasterPage.Site" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></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>

스타일 시트 코드 입력 (Site.css):

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

Site.Master에 Bootstrap과 스타일 시트 코드 포함:

<%@ Master Language="C#" AutoEventWireup="true"
    CodeBehind="Site.master.cs" Inherits="DevMasterPage.Site" %>

<!DOCTYPE html>
<html lang="ko">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="HeaderContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

서브 페이지 생성 (Default.aspx, About.aspx, Contact.aspx):

그림 9 10 마스터 페이지가 있는 웹 폼

마스터 페이지 선택:

그림 9 11 마스터 페이지 선택

Default.aspx 페이지 코드 입력:

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Site.Master" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="DevMasterPage.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <h1>ASP.NET 마스터 페이지</h1>
        <p>마스터 페이지, 레이아웃 페이지 등은 웹 사이트 공통 레이아웃을 정의하는 기능입니다.</p>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server">
</asp:Content>

About.aspx 및 Contact.aspx 페이지 생성 및 코드 입력: 각 페이지에는 해당 내용에 맞는 코드를 입력합니다.
실행 결과 확인:

그림 9 12 마스터 페이지가 적용된 Default.aspx 페이지

마스터 페이지를 사용하여 웹 사이트의 공통 레이아웃을 정의하고, 서브 페이지에서 이를 상속받아 사용하는 방식으로 웹 사이트의 일관된 레이아웃을 유지할 수 있습니다.

그림 9 13 마스터 페이지가 적용된 About.aspx와 Contact.aspx 페이지

9.5.3 마무리

마스터 페이지를 사용하는 가장 큰 이점은 생산성 향상입니다. 웹 사이트 전체에서 사용되는 페이지 레이아웃을 한 번만 만들어 각 웹 폼 페이지에서 사용함으로써 반복 작업을 줄일 수 있습니다.

웹 폼 사용자 정의 컨트롤 사용 데모

동영상 강의: (SeeSharpGuidePage) 웹 폼 사용자 정의 컨트롤에 HTML 콘텐츠를 올리고 이를 웹 폼에서 실행하기 데모

https://youtu.be/mssskeWrP1o

9.6 ASP.NET 테마와 스킨

9.6.1 테마(Theme)란?

웹 사이트에 같은 스타일을 적용하려면 CSS(Cascading Style Sheet)를 사용하거나, 테마(Theme)를 활용할 수 있습니다. 최근에는 Bootstrap 같은 프레임워크도 많이 사용됩니다.

테마는 컨트롤에 공통적으로 사용할 모양을 미리 정의하는 기능입니다.
**스킨(Skin)**은 서버 컨트롤의 스타일을 미리 지정해 놓은 파일을 말합니다.

9.6.2 웹 사이트에 테마를 적용하기 위한 단계

테마를 적용하는 기본적인 순서는 다음과 같습니다:

Theme 폴더 생성: 웹 프로젝트에 App_Theme 폴더를 생성하고, 하위 폴더로 테마 폴더를 생성합니다. 예: ~/App_Theme/RedTheme/
Skin 파일 생성: 테마 폴더에 Skin 파일(RedTheme.skin)을 하나 이상 생성합니다.
테마 생성: 각 컨트롤에 대한 스타일을 미리 정의합니다. 예: <asp:TextBox runat="server" ForeColor="Blue" BackColor="Gray" />
웹 폼의 Page 지시문에 Theme 속성 지정: Theme="RedTheme"

9.6.3 웹 사이트 전체에 테마 적용하기

웹 사이트 전체에 테마를 적용하고자 할 때는 Web.config 파일에 다음과 같이 테마를 지정합니다.

<system.web>
    <!-- 모든 웹 폼에 일괄적으로 테마와 스킨 적용 -->
    <pages theme="Red"></pages>
</system.web>

9.6.4 테마 적용 범위

테마의 적용 범위는 다음과 같습니다:

Web Form의 Page 지시문에 Theme 속성 사용: 해당 페이지에만 테마가 적용됩니다.
Web.config 파일의 <pages Theme="" /> 사용: 전체 웹 사이트에 테마가 적용됩니다.

Page 지시문에 테마를 적용할 때는, 이미 만들어진 테마 목록을 인텔리센스로 제공합니다.

그림 9 14 Page 지시문의 Theme 속성에 대한 인텔리센스

9.6.5 특정 컨트롤에 테마 적용 방지

특정 컨트롤에 테마를 적용시키지 않으려면 EnableTheming="false"로 설정합니다.

그림 9 15 블루 스킨이 적용된 페이지

그림 9 16 스킨 적용을 해제한 페이지

9.7 [실습] Theme를 사용한 일관적인 디자인 제공

9.7.1 소개

이 실습에서는 테마와 스킨을 활용하여 웹 사이트에 공통된 스타일을 적용하는 방법을 배웁니다. 테마를 사용하면 웹 사이트 전체 또는 개별 웹 폼에 일관된 디자인을 제공할 수 있습니다.

9.7.2 따라하기

ASP.NET 웹 응용 프로그램 생성:
- 이름: DevTheme
- 위치: C:\ASP.NET
- ASP.NET 템플릿 선택: ASP.NET 4.6 템플릿-Empty
- 폴더 및 핵심 참조 추가: Web Forms
테마 폴더 추가: 솔루션 탐색기에서 프로젝트를 선택 후, 마우스 오른쪽 버튼으로 추가 > ASP.NET 폴더 추가 > 테마를 선택합니다.

그림 9 17 ASP.NET 테마 폴더 추가
테마 폴더 생성: App_Themes 폴더 안에 Blue와 Red 폴더를 생성합니다.

그림 9 18 Blue 테마와 Red 테마 폴더 만들기
스킨 파일 추가: Blue 테마 폴더에 BlueSkin.skin 파일을 추가하고, Red 테마 폴더에 RedSkin.skin 파일을 추가합니다.

그림 9 19 웹 폼 스킨 파일 추가

BlueSkin.skin 파일 코드 작성:

<asp:Button runat="server" BackColor="Yellow" BorderColor="Blue" 
    BorderStyle="Dashed" BorderWidth="1px" ForeColor="Blue" 
/>

<asp:Button runat="server" BackColor="Yellow" BorderColor="Blue" 
    BorderStyle="Dashed" BorderWidth="1px" ForeColor="Blue"
    Font-Bold="True" SkinID="BlueSkinBold"
/>

RedSkin.skin 파일 코드 작성:

<asp:Button runat="server" BackColor="Yellow" BorderColor="Red" 
    BorderStyle="Dashed" BorderWidth="1px" ForeColor="Red" 
/>

<asp:Button runat="server" BackColor="Yellow" BorderColor="Red" 
    BorderStyle="Dashed" BorderWidth="1px" ForeColor="Red"
    Font-Bold="True" SkinID="RedSkinBold"
/>

스타일 시트 추가 및 코드 작성: Blue 테마 폴더에 BlueSkin.css 파일을 추가하고, Red 테마 폴더에 RedSkin.css 파일을 추가합니다.
- BlueSkin.css:
```
body {
    color: blue;
}
```
- RedSkin.css:
```
body {
    color:red;
}
```
웹 폼 추가: 프로젝트에 FrmBlueSkin.aspx 및 FrmRedSkin.aspx 웹 폼을 추가합니다.

FrmBlueSkin.aspx 페이지 코드 작성:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="FrmBlueSkin.aspx.cs" Inherits="DevTheme.FrmBlueSkin" 
    Theme="Blue"
%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>블루 스킨 적용 페이지</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        블루 스킨 적용 페이지
        <hr />
        <asp:Button ID="Button1" runat="server" Text="블루 스킨 적용 버튼" />
        <hr />
        <asp:Button ID="Button2" runat="server" Text="SkinID 적용 버튼"
            SkinID="BlueSkinBold" />
    </div>
    </form>
</body>
</html>

FrmRedSkin.aspx 페이지 코드 작성:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="FrmRedSkin.aspx.cs" Inherits="DevTheme.FrmRedSkin" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>레드 스킨 적용 페이지</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        레드 스킨 적용 페이지
        <hr />
        <asp:Button ID="Button1" runat="server" Text="레드 스킨 적용 버튼" />
        <hr />
        <asp:Button ID="Button2" runat="server" Text="SkinID 적용 버튼"
            SkinID="RedSkinBold" />
    </div>
    </form>
</body>
</html>

Web.config 파일에서 테마 적용:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>

      <!-- 모든 웹 폼에 일괄적으로 테마와 스킨 적용 -->
      <pages theme="Red"></pages>

    <compilation debug="true" targetFramework="4.6"/>
    <httpRuntime targetFramework="4.6"/>
  </system.web>
</configuration>

페이지 실행 및 확인: FrmBlueSkin.aspx 및 FrmRedSkin.aspx 페이지를 실행하여 테마 적용 결과를 확인합니다.

그림 9 20 FrmBlueSkin.aspx 페이지

그림 9 21 공통 테마가 적용된 페이지

9.7.3 마무리

테마와 스킨을 사용하여 웹 사이트에 일관된 스타일을 적용하는 것은 생산성을 크게 향상시킵니다. Web.config 파일에 테마를 지정하여 전체 웹 사이트에 일관된 디자인을 적용할 수 있으며, 개별 페이지에는 별도의 테마를 적용하여 유연성을 제공할 수도 있습니다.

추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!