연습: 사용자가 선택할 수 있는 테마 만들기
업데이트: 2007년 11월
이 연습에서는 사용자가 페이지의 테마를 선택할 수 있게 하는 ASP.NET 페이지를 만드는 방법을 보여 줍니다. 이 예제에서는 단일 컨트롤 스킨과 기본 CSS 스타일시트 파일을 사용하지만 여기에서 설명하는 원칙은 그래픽, CSS 파일의 각기 다른 레이아웃 구성표, 더 복잡한 서버 컨트롤 스킨 등이 포함된 더 복잡한 테마에도 적용됩니다.
이 연습에서 수행할 작업은 다음과 같습니다.
Microsoft Visual Web Developer에서 CSS 파일과 서버 컨트롤 스킨이 포함된 테마 만들기
테마를 사용하는 ASP.NET 마스터 페이지 만들기
테마를 사용하는 마스터 페이지가 적용된 ASP.NET 페이지 만들기
마스터 페이지 요소에 대한 스타일 변경을 비롯하여 페이지에 새 테마를 적용하는 드롭다운 목록 서버 컨트롤 만들기
페이지를 실행하여 페이지에 적용된 서로 다른 테마 확인
사전 요구 사항
이 연습을 완료하려면 다음이 필요합니다.
Visual Web Developer(Visual Studio)
.NET Framework
웹 사이트 만들기
예를 들어, 연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계를 수행하여 Visual Web Developer에서 웹 사이트를 이미 만든 경우 이 웹 사이트를 사용하고 다음 단원 "마스터 페이지 만들기"로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.
Visual Web Developer에서 사용자가 지정한 폴더와 Default.aspx라는 새 페이지가 작성됩니다.
테마 만들기
테마는 페이지와 컨트롤의 모양을 정의하는 데 사용할 수 있는 속성 설정의 컬렉션입니다. 웹 응용 프로그램에서 모든 페이지에 일관되게 이 모양을 적용할 수 있습니다. 테마는 서버 컨트롤 스킨, CSS 파일 및 기타 리소스를 포함한 여러 가지 요소로 이루어집니다. 이 예제에서는 스킨 하나와 스타일시트 하나를 사용하여 테마를 만듭니다.
테마는 웹 사이트 프로젝트에서 별도의 디렉터리에 정의됩니다.
테마를 만들려면
솔루션 탐색기에서 웹 사이트 프로젝트 이름을 마우스 오른쪽 단추로 클릭한 다음 ASP.NET 폴더 추가와 테마를 차례로 클릭합니다.
App_Themes 폴더가 자동으로 생성되고 Theme1이라는 새 테마 폴더가 추가됩니다.
새 Theme1 폴더를 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭합니다. Blue를 입력하고 Enter 키를 누릅니다.
새 Blue 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자에서 스킨 파일을 선택하고 파일 이름으로 default.skin을 지정합니다. 추가를 클릭합니다.
솔루션 탐색기에서 새 Blue 폴더를 마우스 오른쪽 단추로 다시 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자에서 스타일시트를 선택합니다. 스타일시트 이름으로 default.css를 지정합니다. 추가를 클릭합니다.
빈 CSS 파일과 서버 컨트롤 스킨 파일이 포함된 첫 번째 테마가 작성되었습니다. 이들 파일을 편집하기에 앞서 테마를 적용할 수 있는 몇 가지 HTML과 컨트롤이 포함된 페이지를 만들어야 합니다.
마스터 페이지 만들기
마스터 페이지와 이 마스터 페이지를 사용하는 페이지에 모두 테마를 손쉽게 적용할 수 있음을 보여 주기 위해 웹 프로젝트에서 Default.aspx 페이지와 함께 사용할 간단한 마스터 페이지를 만듭니다.
마스터 페이지를 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 마스터 페이지를 클릭합니다.
이름 상자에 Master1.master를 입력합니다.
언어 목록에서 원하는 프로그래밍 언어를 클릭합니다.
다른 파일에 코드 입력 확인란의 선택을 취소한 다음 추가를 클릭합니다.
새 마스터 페이지가 소스 뷰에서 열립니다. 페이지의 맨 위에는 ASP.NET 페이지의 맨 위에서 일반적으로 볼 수 있는 @ Page 선언 대신 @ Master 선언이 있습니다. 페이지 본문에는 런타임에 콘텐츠 페이지의 대체 가능한 콘텐츠가 병합될 마스터 페이지 영역을 정의하는 asp:contentplaceholder 컨트롤이 있습니다. 이 연습의 뒷부분에서 콘텐츠 자리 표시자로 추가 작업을 수행합니다.
마스터 페이지 레이아웃
마스터 페이지에서는 페이지를 구성하는 여러 요소들을 정의합니다. 정적 텍스트와 컨트롤을 원하는 대로 조합하여 마스터 페이지에 포함할 수 있습니다. 또한 마스터 페이지에는 페이지가 표시될 때 동적 콘텐츠가 나타나는 위치를 지정하는 콘텐츠 자리 표시자가 하나 이상 포함됩니다.
이 연습에서는 Home.aspx 페이지의 레이아웃으로 마스터 페이지 콘텐츠 자리 표시자, 여러 개의 가로줄 및 제목이 포함된 표를 사용합니다.
마스터 페이지의 표를 만들려면
소스 뷰에서 Master1.master 파일을 선택한 다음 두 form 요소 사이의 텍스트를 선택하고 선택된 영역에 다음 내용을 붙여넣습니다. 이 코드는 div 요소 사이에 기본 마스터 레이아웃의 내용 대신 표에 있는 콘텐츠 자리 표시자를 추가합니다.
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>다음 단원에서 만들 Home.aspx라는 콘텐츠 페이지에 적용할 수 있는 레이아웃이 마스터 페이지에 작성되었습니다.
콘텐츠 페이지 만들기
마스터 페이지에서는 콘텐츠에 대한 템플릿을 제공합니다. 마스터 페이지와 연결되는 ASP.NET 페이지를 만들어 마스터 페이지의 콘텐츠를 정의합니다. 콘텐츠 페이지는 마스터 페이지와 병합될 콘텐츠만 포함하고 있는 특별한 ASP.NET 페이지입니다. 콘텐츠 페이지에서는 사용자가 해당 페이지를 요청할 때 표시하려는 텍스트와 컨트롤을 추가합니다.
이 콘텐츠 페이지에는 앞서 만든 마스터 페이지와 아직 완성되지 않은 테마가 사용됩니다. 이 페이지에는 마스터 페이지의 콘텐츠 자리 표시자가 사용되며 제목, 부제목 및 드롭다운 목록이 포함됩니다. 이 페이지에는 마스터 페이지가 사용되므로 콘텐츠 자리 표시자를 비롯하여 @ Page 지시문에 MasterPageFile 특성이 포함되어야 합니다.
콘텐츠 페이지를 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 홈을 입력합니다.
언어 목록에서 원하는 프로그래밍 언어를 클릭합니다.
마스터 페이지 선택 확인란을 선택한 다음 추가를 클릭합니다.
마스터 페이지 선택 대화 상자가 나타납니다.
Master1.master를 클릭한 다음 확인을 클릭합니다.
Home.aspx라는 새 파일이 작성됩니다. 이 페이지에는 다음 예제에서와 같이 현재 페이지를 MasterPageFile 특성을 가진 선택된 마스터 페이지에 연결하는 @ Page 지시문이 포함됩니다.
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>이 페이지에는 다음에 작업할 <asp:Content> 요소도 있습니다.
콘텐츠 페이지에 콘텐츠 추가
ASP.NET 페이지를 구성하는 html, body 또는 form 요소와 같은 일반적인 요소가 콘텐츠 페이지에는 없습니다. 대신, 마스터 페이지에서 만든 자리 표시자 영역을 대신하여 마스터 페이지에 표시할 콘텐츠만 추가합니다. 이 예제에서는 제목 1 요소, 제목 2 요소, 단락 요소 및 드롭다운 목록을 추가합니다. 드롭다운 목록은 페이지에 적용할 테마를 선택하는 데 사용됩니다.
홈 페이지에 콘텐츠를 추가하려면
asp:Content 시작 및 끝 태그 사이에 다음 코드를 붙여넣습니다. 다음 예제에서는 제목 1, 제목 2 및 단락이라는 세 가지 HTML 요소를 만듭니다. 이 예제에서는 드롭다운 목록 컨트롤도 추가합니다. 원하는 경우 디자인 뷰에서 페이지에 다른 컨트롤을 추가할 수도 있습니다.
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>드롭다운 목록에서 테마를 선택하면 해당 테마가 로드되도록 관련 코드를 실행할 스크립트 섹션을 추가합니다. 다음 예제와 script 태그를 콘텐츠 페이지의 @ Page 지시문 다음 줄에 추가합니다.
<script > Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script > public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>테마는 페이지 수명 주기의 PreInit 이벤트가 진행되는 동안 로드됩니다. 페이지 요청 폼에는 값의 배열이 포함되고 인덱스가 4인 값은 드롭다운 목록에서 선택한 값입니다. 이 값은 페이지의 테마에 할당되고 페이지를 로드하면 새 테마가 적용됩니다.
이 연습의 다음 단계에서는 각기 다른 테마가 적용되는 것을 보여 주는 데 사용할 여러 테마를 만듭니다.
Blue 테마 편집
Blue 테마에는 빈 스타일시트와 빈 스킨이 포함되어 있습니다. 기본 페이지를 구성하는 요소와 기본 페이지에 사용되는 마스터 페이지에 대해 살펴봤으므로 이제 테마 파일을 편집하여 페이지 요소에 색을 추가하도록 합니다.
Blue 테마를 편집하려면
소스 뷰에서 Blue 테마 폴더의 Default.skin 파일을 엽니다.
다음 코드를 드롭다운 목록에 추가하여 Blue 테마를 선택했을 때 적용할 페이지 색을 지정합니다.
<asp:dropdownlist ForeColor="white" BackColor="Blue" />소스 뷰에서 Blue 폴더의 Default.css 파일을 엽니다. 우선 다음 코드를 추가하여 마스터 페이지의 표 제목에 서식을 적용합니다.
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }그런 다음 아래 코드를 사용하여 표에 배경색을 추가합니다.
table.header { background-color: Blue; }이번에는 콘텐츠 페이지의 제목 1 및 제목 2 요소의 스타일을 지정합니다.
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }마지막으로 가로줄과 단락 요소의 스타일을 지정합니다.
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
페이지에 테마 연결
Home.aspx 페이지에 적용된 테마를 보려면 먼저 이 페이지에서 테마를 사용하도록 지시하는 특성을 @ Page 지시문에 추가해야 합니다.
페이지를 테마에 연결하려면
소스 뷰에서 Home.aspx를 엽니다.
StylesheetTheme 특성을 @ Page 지시문에 추가하고 이를 Blue 테마로 설정합니다. 페이지 지시문은 다음 예제와 같습니다.
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
페이지 테스트
ASP.NET 페이지를 실행할 때와 같은 방법으로 페이지를 실행하여 테스트할 수 있습니다.
페이지를 테스트하려면
Home.aspx 페이지를 연 상태에서 Ctrl+F5를 눌러 페이지를 실행합니다.
ASP.NE에서는 Home.aspx 페이지의 콘텐츠와 Master1.master 페이지의 레이아웃을 단일 페이지로 병합한 다음 Blue 테마를 적용하고 결과 페이지를 브라우저에 표시합니다. 마스터 파일에 정의된 제목 및 배경을 비롯하여 드롭다운 목록과 HTML 요소에 Blue 테마가 적용됩니다.
추가 테마 만들기
이 연습의 목적은 페이지 사용자가 Blue 테마를 비롯한 여러 테마를 선택할 수 있게 하는 것입니다. 스킨과 스타일시트 파일을 새 테마 디렉터리로 복사한 다음 새 테마 색이 반영되도록 테마에 사용되는 색을 편집할 수 있습니다. 다음 절차에서는 Red와 Green이라는 두 개의 테마를 새로 만듭니다.
추가 테마를 만들려면
솔루션 탐색기에서 App_Themes 폴더를 마우스 오른쪽 단추로 클릭한 다음 ASP.NET 폴더 추가와 테마를 차례로 클릭합니다. 폴더 제목 Theme1을 선택하고 Red를 입력한 다음 Enter 키를 누릅니다.
Blue 폴더를 열고 Default.skin 및 Default.css 파일을 선택합니다. 선택한 두 파일을 마우스 오른쪽 단추로 클릭한 다음 복사를 클릭합니다.
Red 폴더를 마우스 오른쪽 단추로 클릭한 다음 붙여넣기를 클릭합니다.
1단계를 반복합니다. 이번에는 새 테마 폴더의 이름으로 Green을 입력합니다. 그런 다음 Green 폴더를 마우스 오른쪽 단추로 클릭하고 붙여넣기를 클릭하여 Default.skin 및 Default.css 파일의 복사본을 Green 폴더에 추가합니다.
테마 색이 반영되도록 스킨 파일의 색 특성을 편집합니다. 예를 들어, Red 테마의 스킨 파일은 다음 예제와 같습니다.
<asp:dropdownlist ForeColor="white" BackColor="Red" />테마의 이름이 반영되도록 각 테마의 스타일시트를 편집합니다. 배경에 비해 두드러져 보이도록 여러 HTML 요소와 텍스트에 녹색 음영을 다양하게 사용할 수 있습니다. Green 테마의 스타일시트는 다음 예제와 같습니다.
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
테마 선택 테스트
이제 드롭다운 목록을 사용하여 세 가지 테마 중 하나를 페이지에 대해 선택할 수 있습니다.
다른 테마를 선택하려면
Home.aspx 페이지로 전환한 다음 Ctrl+F5를 누릅니다.
드롭다운 목록에서 Green 또는 Red를 선택합니다.
페이지의 HTML 요소에 스타일시트가 적용되고 드롭다운 목록 컨트롤에 스킨이 적용됩니다.
다음 단계
마스터 페이지를 사용하는 방법은 연습: Visual Web Developer에서 ASP.NET 마스터 페이지 생성 및 사용을 참조하십시오.