연습: Visual Studio에서 테마를 사용하여 웹 사이트 사용자 지정
업데이트: 2007년 11월
이 연습에서는 테마를 사용하여 웹 사이트의 페이지와 컨트롤에 일관된 모양을 적용하는 방법을 설명합니다. 테마는 개별 컨트롤의 공통적인 모양을 정의하는 스킨 파일, 하나 이상의 스타일시트 및 TreeView 컨트롤 등에서 사용할 일반적인 그래픽을 포함할 수 있습니다. 이 연습에서는 웹 사이트에서 ASP.NET 테마 작업 방법을 보여 줍니다.
이 연습에서 수행할 작업은 다음과 같습니다.
미리 정의된 ASP.NET 테마를 개별 페이지 및 사이트 전체에 적용
개별 컨트롤의 모양을 정의하는 스킨을 포함하는 새 테마 만들기
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
Microsoft 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라는 새 페이지를 만듭니다.
이 연습에서 테마 작업을 시작하려면 Button 컨트롤, Calendar 컨트롤 및 Label 컨트롤이 테마에 의해 영향을 받는 방법을 확인할 수 있도록 세 컨트롤을 설정합니다.
페이지에 컨트롤을 배치하려면
디자인 뷰로 전환합니다.
도구 상자의 표준 그룹에서 Calendar 컨트롤, Button 컨트롤 및 Label 컨트롤을 페이지로 끌어 옵니다. 페이지의 정확한 레이아웃은 중요하지 않습니다.
.gif "참고")
참고:컨트롤에 서식을 적용하지 마십시오. 예를 들어, AutoFormat 명령을 사용하여 Calendar 컨트롤의 모양을 설정하지 마십시오.
소스 뷰로 전환합니다.
페이지의 <head> 요소에 특성이 있어서 다음과 같이 표시되는지 확인합니다.
<head ></head>페이지를 저장합니다.
페이지를 테스트하려면 테마를 적용하기 전에 페이지를 확인한 다음 여러 가지 테마를 사용합니다.
테마 만들기 및 페이지에 적용
ASP.NET을 사용하면 쉽게 미리 정의된 테마를 페이지에 적용하거나 고유한 테마를 만들 수 있습니다. 자세한 내용은 방법: ASP.NET 테마 정의를 참조하십시오. 이 연습 단계에서는 컨트롤의 모양을 정의하는 몇 개의 단순 스킨을 사용하여 테마를 만듭니다.
새 테마를 만들려면
Visual Web Developer에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭하고 ASP.NET 폴더 추가를 클릭한 다음 테마를 클릭합니다.
App_Themes라는 폴더와 Theme1이라는 하위 폴더가 생성됩니다.
Theme1 폴더의 이름을 sampleTheme으로 바꿉니다.
이 폴더의 이름이 생성된 테마의 이름(여기에서는 sampleTheme)이 됩니다. 정확한 이름은 중요하지 않지만 사용자 지정 테마를 적용할 때 이름을 기억해야 합니다.
sampleTheme 폴더를 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택한 다음 새 텍스트 파일을 추가하여 이름을 sampleTheme.skin으로 지정합니다.
sampleTheme.skin 파일에 다음 코드 예와 같은 스킨 정의를 추가합니다.
<asp:Label ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>참고:정확히 어떤 특징을 정의하는지는 중요하지 않습니다. 이전 선택의 값은 나중에 테마를 테스트할 때 보다 명확해지는 제안 사항입니다.
컨트롤 모양에 영향을 주는 설정만 정의에 포함된다는 것을 제외하고 스킨 정의는 컨트롤을 만들기 위한 구문과 유사합니다. 예를 들어, 스킨 정의에는 ID 속성에 대한 설정이 포함되지 않습니다.
스킨 파일을 저장한 다음 닫습니다.
이제 테마를 적용하기 전에 페이지를 테스트할 수 있습니다.
| 참고: |
|---|
CSS 스타일시트 파일을 sampleTheme 폴더에 추가하면 이 테마를 사용하는 모든 페이지에 적용됩니다. |
테마를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
컨트롤이 기본 모양으로 표시됩니다.
브라우저를 닫은 다음 Visual Web Developer로 돌아갑니다.
소스 뷰에서 다음 특성을 @ Page 지시문에 추가합니다.
<%@ Page Theme="sampleTheme" ... %>참고:특성 값에 실제 테마의 이름을 지정해야 합니다(이 경우 이전에 정의한 sampleTheme.skin 파일).
Ctrl+F5를 눌러 페이지를 다시 실행합니다.
이번에는 테마에 정의된 색 구성표로 컨트롤이 렌더링됩니다.
Label 및 Button 컨트롤은 sampleTheme.skin 파일에 지정된 설정으로 나타납니다. sampleTheme.skin 파일에 Calendar 컨트롤에 대한 항목을 만들지 않았으므로 이 컨트롤은 기본 모양으로 표시됩니다.
가능한 경우 Visual Web Developer에서 이 테마를 다른 테마 이름으로 설정합니다.
Ctrl+F5를 눌러 페이지를 다시 실행합니다.
컨트롤이 모양을 다시 변경합니다.
스타일시트 테마와 사용자 지정 테마 비교
테마를 만든 후 이전 단원에서와 같이 사용자 지정 테마나 스타일시트 테마로 페이지와 연결하여 응용 프로그램에서 테마의 사용 방법을 설정할 수 있습니다. 스타일시트 테마는 사용자 지정 테마와 동일한 테마 파일을 사용하지만 페이지 컨트롤과 속성 내에서의 우선 순위가 더 낮아 CSS 파일과 같습니다. ASP.NET 내에서 우선 순위는 다음과 같습니다.
Web.config 파일에 설정된 테마를 포함하는 테마 설정
로컬 페이지 설정
스타일시트 테마 설정
따라서 스타일시트 테마를 사용하도록 선택하면 페이지에서 로컬로 선언된 설정이 테마의 속성을 재정의합니다. 이와 마찬가지로 사용자 지정 테마를 사용하면 테마의 속성이 로컬 페이지 내의 설정과 사용 중인 스타일시트 테마 내의 설정을 재정의합니다.
스타일시트 테마를 사용하고 우선 순위를 확인하려면
소스 뷰로 전환합니다.
다음 페이지 선언을 찾습니다.
<%@ Page theme="sampleTheme" %>다음 스타일시트 테마 선언으로 변경합니다.
<%@ Page StyleSheetTheme="sampleTheme" %>Ctrl+F5를 눌러 페이지를 실행합니다.
Label1 컨트롤의 ForeColor 속성이 빨간색입니다.
디자인 뷰로 전환합니다.
Label1을 선택하고 속성에서 ForeColor를 파란색으로 설정합니다.
Ctrl+F5를 눌러 페이지를 실행합니다.
이제 Label1의 ForeColor 속성이 파란색입니다.
소스 뷰로 전환합니다.
페이지 선언을 변경하여 스타일시트 테마 대신 테마를 선언합니다. 다음 페이지 선언을 찾습니다.
<%@ Page StyleSheetTheme="sampleTheme" %>다시 다음과 같이 변경합니다.
<%@ Page Theme="sampleTheme" %>Ctrl+F5를 눌러 페이지를 실행합니다.
이제 Label1의 ForeColor 속성이 다시 빨간색입니다.
기존 컨트롤을 기반으로 하는 사용자 지정 테마
스킨 정의를 만드는 편리한 방법은 디자이너를 사용하여 모양 속성을 설정한 다음 컨트롤 정의를 스킨 파일로 복사하는 것입니다.
기존 컨트롤을 기반으로 하는 사용자 지정 테마를 만들려면
디자인 뷰에서 Calendar 컨트롤의 속성을 설정하여 고유한 컨트롤 모양을 만듭니다. 제안되는 설정은 다음과 같습니다.
BackColor 녹청
BorderColor 빨강
BorderWidth 4
CellSpacing 8
Font-Name Arial
Font-Size Large
SelectedDayStyle-BackColor 빨강
SelectedDayStyle-ForeColor 노랑
TodayDayStyle-BackColor 분홍
참고:정확히 어떤 특징을 정의하는지는 중요하지 않습니다. 이전 목록의 값은 나중에 테마를 테스트할 때 보다 명확해지는 제안 사항입니다.
소스 뷰로 전환하여 <asp:calendar> 요소와 해당 특성을 복사합니다.
sampleTheme.skin 파일로 전환하거나 엽니다.
Calendar 컨트롤 정의를 sampleTheme.skin 파일에 붙여넣습니다.
sampleTheme.skin 파일의 정의에서 ID 속성을 제거합니다.
sampleTheme.skin 파일을 저장합니다.
Default.aspx 페이지로 전환하여 두 번째 Calendar 컨트롤을 페이지로 끌어 옵니다. 해당 속성을 설정하지 마십시오.
Default.aspx 페이지를 실행합니다.
두 Calendar 컨트롤이 동시에 나타납니다. 첫 번째 Calendar 컨트롤은 지정한 명시적 속성 설정을 반영합니다. 두 번째 Calendar 컨트롤은 sampleTheme.skin 파일에서 지정한 스킨 정의로부터 모양 속성을 상속 받았습니다.
웹 사이트에 테마 적용
전체 웹 사이트에 테마를 적용할 수 있으므로 개별 페이지에 테마를 다시 적용할 필요가 없습니다. 필요한 경우 페이지에서 테마 설정을 재정의할 수 있습니다.
웹 사이트에 테마를 설정하려면
Web.config 파일이 자동으로 웹 사이트에 추가되지 않은 경우 다음 단계에 따라 Web.config 파일을 만듭니다.
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
템플릿에서 웹 구성 파일을 선택한 다음 추가를 클릭합니다.
참고 파일 이름은 항상 Web.config로 지정되므로 이름을 입력할 필요가 없습니다.
아직 없을 경우 <pages> 요소를 추가합니다. <system.web> 요소 내부에 <pages> 요소가 나타나야 합니다.
<pages> 요소에 다음 특성을 추가합니다.
<pages theme="sampleTheme" />참고:Web.config는 대/소문자를 구분하고 값은 카멜식 대/소문자를 사용합니다. 예를 들어, theme 및 styleSheetTheme과 같습니다.
Web.config 파일을 저장한 다음 닫습니다.
Default.aspx로 전환하고 소스 뷰로 전환합니다.
페이지 선언에서 theme="themeName" 특성을 제거합니다.
Ctrl+F5를 눌러 Default.aspx를 실행합니다.
이제 Web.config 파일에서 지정한 테마로 페이지가 표시됩니다.
페이지 선언에서 테마 이름을 지정하도록 선택하면 Web.config 파일에서 지정한 테마를 재정의합니다.
다음 단계
ASP.NET 테마 지원은 전체 응용 프로그램의 모양과 느낌을 설정하는 다양한 옵션을 제공합니다. 이 연습에서는 몇 가지 기본 사항에 대해 설명했지만 추가 정보를 살펴 볼 수도 있습니다. 예를 들어, 다음 항목에 대해 자세히 알아 볼 수 있습니다.
일반적인 테마를 사용합니다. 자세한 내용은 ASP.NET 테마 및 스킨 개요를 참조하십시오.
사용자 지정 테마 및 스킨을 만듭니다. 자세한 내용은 방법: ASP.NET 테마 정의를 참조하십시오.
코드로 테마를 사용합니다. 자세한 내용은 방법: 프로그래밍 방식으로 ASP.NET 테마 적용을 참조하십시오.