Creative Commons License

Microsoft .NET

닷넷!시작하기
닷넷! Ver 2.0~
닷넷!스킬업
웹개발
윈폼개발
실용모듈개발
Tip & Tech
하루 한 문법

Microsoft .NET 개발자들을 위한 공간입니다. 기초강의에서 부터 고급 기술 정보 및 팁등을 다루도록 하겠습니다.

.

웹개발

이제 웹 기반 응용개발 지식은 거의 필수적으로 요구되는 시대입니다. 구체적인 웹 사이트 개발은 아니더라도 거시적인 웹 기반 서비스에 대한 지식 배양을 위해 할 것이 참 많네요 ^^

[ASP.NET] Theme 와 Skin

작성자 : 박종명
최초 작성일 : 2008-06-25 (수요일)
최종 수정일 : 2008-06-25 (수요일)
조회 수 : 3070

* Theme Skin

 

ASP.NET 2.0에서 새롭게 제공되는 것으로 Presentation Layer 디자인의 유연성을 제공한다.

 

Theme 를 이용하면 다음과 같은 이점을 얻을 수 있다.

-       여러 Theme 에 대한 사용자 선택권을 주도록 함으로써 웹 사이트의 개인화 실현

-       Content Html 코드와 디자인을 분리함으로써 유지/보수성 향상

 

Theme 를 이용하면 다음과 같은 것을 구현할 수 있다.

-       색상, 글꼴, 크기, 스타일, 이미지 제어 등

 

Theme 는 웹 프로젝트의 App_Themes 폴더에 아래와 같은 파일로 이루어 진다.

-       Skin 파일 : 서버 측에서 동작하는 스타일 시트

-       Stylesheet 파일 : 클라이언트 측에서 동작하는 스타일 시트

-       이미지 등의 리소스

 

프로젝트(프로그램) 측면에서 보면 Theme App_Themes의 하위폴더이며 각 테마는 스킨과 스타일

시트를 정의해 해당 테마의 디자인 요소를 결정한다.

 

아래 그림은 MyTheme YourTheme 라는 두 개의 테마를 정의한 모습이다.

 

 

≡ 간단한 Theme 만들고 적용하기

 

위 그림의 프로젝트 파일구조에 기반하여 간단한 샘플을 만들어 보자

 

1. Skin 만들기

Skin ASP.NET 서버 컨트롤의 스타일을 정의할 수 있다.

MyTheme/SkinFile.skin 파일에 다음과 같이 버턴과 텍스트박스의 스타일을 정의한다

 

<asp:TextBox runat="server" BorderStyle="Dashed" BorderWidth="3px" BorderColor="Red" />

 

<asp:Button runat="server" BorderStyle="Solid" BorderWidth="3px" BorderColor="Blue" BackColor=Green />

 

 

2. (TextBox,Button) 컨트롤에 Skin 적용하기

@Page 지시자 에 Theme 속성을 지정하자.

<%@ Page Language="C#" Theme="MyTheme" …………..

 

이렇게 하면 이 페이지에 있는 컨트롤들에 테마가 적용된다.

아래는 이 샘플의 결과 페이지 모습이다

 

살펴봤듯이, Skin 파일은 실제 컨트롤 선언과 거의 흡사하다.

, 컨트롤의 ID 를 지정할 수는 없다(당연하겠지만 Skin 은 스타일일 뿐이니까..)

 

Theme 적용하는 방법들

 

앞의 샘플에서는 단일 페이지의 모든 컨트롤에 Theme 영향을 받도록 지정했었다.

웹사이트에 테마를 지정하기 위한 방법은 아래와 같은 것들이 있다.

 

1. 단일 페이지의 모든 컨트롤(위 샘플의 방법)

<%@ Page Language="C#" Theme="MyTheme" …………..

앞서 샘플에서 봤듯이 @Page 지시자에 Theme 속성에 특정 테마 명(테마폴더 명)을 지정하면 그 페이지의  (Skin 파일에 정의되어 있는)모든 컨트롤들에 테마 적용이 되는 방식이다.(Skin 파일에 정의된 컨트롤 스타일 정의에 SkinID 속성을 지정하지 않도록 한다)

 

2. 단일 페이지의 특정 컨트롤

만일, 하나의 페이지에 여러 개의 버턴이 있을 시 특정 버턴에만 테마를 달리 주고 싶다던 지 특정 버턴은 테마적용을 하고 싶지 않다던 지 할 경우에는 1번 방식이 적합하지 않다. 이 경우에는 Skin 파일에 SkinID 를 명시적으로 부여하여 페이지의 컨트롤이 그 SkinID 를 참조하도록 한다.

(이 경우도 역시  @Page  지시자 선언은 동일하다)

 

우선 Skin파일에 다음과 같이 SkinID를 정의하고,

<asp:TextBox runat="server" SkinID="MyTextBoxSkin……

<asp:Button runat="server"  SkinID="MyButtonSkin"……

 

페이지의 컨트롤에 SkinID를 지정해 준다.

<asp:TextBox SkinID="MyTextBoxSkin" ……

<asp:Button SkinID="MyButtonSkin" ……

 

만일 특정 컨트롤에 테마를 적용하고 싶지 않다면 다음과 같이 컨트롤의 속성 중,

EnableTheming="false"로 설정하면 된다

 

 

3. 웹 응용프로그램 전역 설정

만일 웹 응용프로그램의 모든 페이지에 테마를 적용하고 싶다면 web.config <page> Element theme 어트리뷰트를 설정하면 된다.

 

<system.web>

      <pages theme="MyTheme" />

……………

 

 

 

≡ 동적 Theme 설정

 

앞에서 web.config ,@page 지시자 로 페이지에 테마를 적용하는 것을 알아보았는데, 프로그래밍 방식으로도 테마를 동적으로 페이지에 지정할 수 가 있다.

 

Page PreInit 이벤트에서 Page 객체의 Theme 속성을 동적으로 지정하면 된다.

 

protected void Page_PreInit(object sender, EventArgs e)

{

    this.Theme = "MyTheme";

}

 

동적으로 테마를 적용하기 위해서는 반드시 컨트롤이 생성되기 이전 단계인 PreInit 이벤트에서 처리해줘야 한다. 만일 Load 와 같은 이벤트에서 페이지의 테마를 적용하려고 하면 다음과 같은 예외 메시지를 보게 될 것이다.

 

'Page_PreInit' 이벤트의 내부 또는 앞 부분에서만 'Theme' 속성을 설정할 수 있습니다

 

 

StylesheetTheme

 

Theme 와 동일한 역할을 하는 StylesheetTheme 라는 것이 있다.

Theme 처럼 web.config @page 지시자의 속성으로 지정될 수 있는데 다음과 같은 차이가 있다.

 

1. 테마 적용의 차이

Theme 의 경우 컨트롤에 직접 스타일을 지정했더라도 Theme 의 스타일이 항상 적용된다.

그러나 StylesheetTheme 로 테마를 설정하면 컨트롤에 직접 정의된 스타일이 적용된다.

 

2. 프로그래밍 방식으로 테마 설정 불가

this.StyleSheetTheme = "MyTheme";

과 같은 형태의 설정이 불가능 하다.

StyleSheetTheme   web.config, @page 지시자에 의해서만 설정 가능하다.

 

이름
비밀번호
홈페이지
SI <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요