[ .NET 테마(Theme) ,스킨(SKIN)] 적용하기

테마와 CSS 스타일시트 비교

테마와 스타일시트는 둘 다 모든 페이지에 적용할 수 있는 공통 특성 집합을 정의한다는 점에서 비슷합니다. 하지만 테마와 스타일시트는 다음과 같은 점이 다릅니다.

• 테마는 특정한 스타일 속성뿐만 아니라 컨트롤이나 페이지의 여러 속성을 정의할 수 있습니다. 예를 들어 테마를 사용하여 TreeView 컨트롤의 그래픽, GridView 컨트롤의 템플릿 레이아웃 등을 지정할 수 있습니다.

• 테마에는 그래픽이 포함될 수 있습니다.

• 테마는 스타일시트의 캐스케이드 방식을 사용하지 않습니다. 예를 들어, 사용자가 테마를 명시적으로 스타일시트 테마로 적용하지 않는 경우 기본적으로 속성 값이 로컬 속성 값을 재정의합니다.

• 각 페이지에는 하나의 테마만 적용할 수 있습니다. 여러 스타일시트를 적용할 수 있는 스타일시트와 달리 한 페이지에 여러 테마를 적용할 수 없습니다.

테마 폴더에 .skin 파일을 만듭니다. .skin 파일에는 여러 컨트롤 형식에 대한 하나 이상의 컨트롤 스킨이 포함될 수 있습니다. 각 컨트롤에 대해 별도로 스킨 파일을 정의하거나 테마에 있는 모든 스킨을 단일 파일로 정의할 수 있습니다.

컨트롤 스킨에는 기본 스킨과 명명된 스킨의 두 가지 형식이 있습니다.

• 테마를 페이지에 적용할 때 같은 형식의 모든 컨트롤에 기본 스킨이 자동으로 적용됩니다. SkinID 특성이 없는 컨트롤 스킨은 기본 스킨입니다. 예를 들어, Calendar 컨트롤에 대한 기본 스킨을 만들면, 테마를 사용하는 페이지의 모든 Calendar 컨트롤에 컨트롤 스킨이 적용됩니다. 기본 스킨은 컨트롤 형식과 정확히 일치하기 때문에 Button 컨트롤 스킨은 모든 Button 컨트롤에 적용되지만 LinkButton 컨트롤 또는 Button 개체에서 파생된 컨트롤에는 적용되지 않습니다.

• 명명된 스킨은 SkinID 속성이 설정된 컨트롤 스킨입니다. 명명된 스킨은 형식별로 컨트롤에 자동으로 적용되지 않습니다. 그 대신 컨트롤의 SkinID 속성을 설정하여 명명된 스킨을 컨트롤에 명시적으로 적용할 수 있습니다. 명명된 스킨을 만들면 응용 프로그램에서 동일 컨트롤의 각 인스턴스에 대해 서로 다른 스킨을 설정할 수 있습니다.

페이지 테마를 만들려면

1. 웹 사이트에 App_Themes라는 새 폴더를 만듭니다.

   참고

   폴더 이름은 App_Themes여야 합니다.

2. 테마 파일을 저장하기 위해 App_Themes 폴더의 새 하위 폴더를 만듭니다.

3. 이 하위 폴더의 이름은 테마의 이름입니다. 예를 들어 이름이 BlueTheme인 테마를 만들려면 \App_Themes\BlueTheme 폴더를 만듭니다.

4. 테마를 구성하는 스킨, 스타일시트 및 이미지 관련 파일을 새 폴더에 추가합니다.

스킨을 만들려면

1. 테마 하위 폴더에서 확장명이 .skin인 새 텍스트 파일을 만듭니다.

2. 일반적으로는 Button.skin 또는 Calendar.skin처럼 각 컨트롤에 대해 .skin 파일을 하나씩 만들어야 합니다. 그러나 스킨 파일에는 스킨 정의를 여러 개 포함할 수 있으므로 필요에 따라 .skin 파일의 수를 조정할 수 있습니다.

4. .skin 파일에서 선언적 구문을 사용하여 표준 컨트롤 정의를 추가합니다. 이 때 테마에 설정할 속성만 포함하고 ID 특성은 포함하지 않습니다. 컨트롤 정의에는 runat="server" 특성이 포함되어야 합니다.

   다음 예제에서는 테마에 있는 모든 Button 컨트롤의 색과 글꼴을 정의하여 Button 컨트롤에 대한 기본 컨트롤 스킨을 보여 줍니다.

예제코드

TestSkin.skin

<%--
기본 스킨 템플릿입니다. 다음 스킨은 예제로만 제공됩니다.

1. 명명된 컨트롤 스킨. 동일한 테마에는 각 컨트롤 형식에 SkinId가
   중복될 수 없으므로 SkinId는 고유하게 정의해야 합니다.

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. 기본 스킨. SkinId가 정의되어 있지 않습니다. 동일한 테마에서
   각 컨트롤 형식에는 기본 컨트롤 스킨을 하나만 사용할 수 있습니다.

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />

--%>

페이지나 웹 사이트에 또는 전체적으로 테마를 적용할 수 있습니다. 웹 사이트 수준에서 테마를 설정하면 개별 페이지에 대한 테마를 재정의하는 경우를 제외하고 사이트의 모든 페이지 및 컨트롤에 스타일과 스킨이 적용됩니다. 페이지 수준에서 테마를 설정하면 해당 페이지 및 페이지에 포함된 모든 컨트롤에 스타일과 스킨이 적용됩니다.

기본적으로 테마는 로컬 컨트롤 설정을 재정의합니다. 또는 컨트롤에 명시적으로 설정되지 않은 컨트롤 설정에만 테마가 적용되도록 테마를 스타일시트 테마로 설정할 수도 있습니다.

웹 사이트에 테마를 적용하려면

다음 예제와 같이 응용 프로그램의 Web.config 파일에서 <pages> 요소를 전역 테마 또는 페이지 테마의 이름으로 설정합니다.

<configuration>
    <system.web>
        <pages theme="ThemeName" />
    </system.web>
</configuration>

***** 응용 프로그램 테마와 전역 응용 프로그램 테마의 이름이 같으면 페이지 테마가 우선권을 가집니다.

테마를 스타일시트 테마로 설정하고 로컬 컨트롤 설정에 종속되게 하려면 StyleSheetTheme 특성을 대신 설정합니다.

<configuration>
    <system.web>
        <pages StyleSheetTheme="Themename" />
    </system.web>
</configuration>

Web.config 파일의 테마 설정은 해당 응용 프로그램의 모든 ASP.NET 웹 페이지에 적용됩니다. Web.config 파일의 테마 설정은 일반적인 구성 계층 구조 규칙을 따릅니다. 예를 들어 페이지의 하위 집합에만 테마를 적용하려면 Web.config 파일이 있는 폴더에 페이지를 넣거나 루트 Web.config 파일에 <location> 요소를 만들어 폴더를 지정하면 됩니다. 자세한 내용은 특정 파일 및 하위 디렉터리 구성을 참조하십시오.

********** <pages > 참고하세요~*****************************

<pages buffer="[True|False]" 

enableSessionState="[True|False|ReadOnly]" 

enableViewState="[True|False]" 

enableViewStateMac="[True|False]" 

smartNavigation="[True|False]" 

autoEventWireup="[True|False]" 

pageBaseType="typename, assembly" 

userControlBaseType="typename" 

validateRequest="[True|False]" 

masterPageFile="file path" 

theme="string" 

styleSheetTheme="string" 

maxPageStateFieldLength="number" 

compilationMode="[Always|Auto|Never]" 

pageParserFilterType="string" 

viewStateEncryptionMode="[Always|Auto|Never]" 

maintainScrollPositionOnPostBack="[True|False]" 

asyncTimeout="number" > 

<controls>...</controls> 

<namespaces>...</namespaces> 

<tagMapping>...</tagMapping> 

</pages>

만약특정디렉토리만 하고 싶다면 <location>  을 사용해서 지정하면됨

<configuration>
    <system.web>
        <pages StyleSheetTheme="Themename" />
    </system.web>
</configuration>

//ProductList 디렉토리 이름
      <location path="ProductList">
        <system.web>
          <pages theme="main" ></pages>
        </system.web>
      </location>

*********************************************

개별 페이지에 테마를 적용하려면

다음 예제와 같이 사용할 테마의 이름을 @ Page 지시문의 Theme 또는 StyleSheetTheme 특성에 설정합니다.

<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %>

명명된 스킨을 컨트롤에 적용하려면

• 다음 예제와 같이 컨트롤의 SkinID 속성을 설정합니다.

<asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />

예제 ))~~

App_Themes 폴더

  ㄴmain

          ㄴ SkinFile.skin

          ㄴ StyleSheet.css

소스

[ SkinFile.skin ]

<asp:Label  runat="server" BackColor="Silver" BorderColor="Gray" ForeColor="Black"
Height="91px" Text="Label" Width="321px"></asp:Label>

//Button 이 두개 인데 나중에 SkinID를 통해서 원하는것을 사용할수있따
만약 스킨아이디가 없다면 기본 스킨이 적용(스킨아이디가 지정안된 컨트롤) 된다.

<asp:Button runat="server"
  BackColor="Red"
  ForeColor="blue"
  Font-Name="Arial"
  Font-Size="9px"  SkinID="Test" />
<asp:Button runat="server"
  BackColor="white"
  ForeColor="blue"
  Font-Name="Arial"
  Font-Size="9px"  SkinID="Test2" />

/>

[StyleSheet.css]

body
{
background-color:Gray
}

요렇게 파일이 있따

Default.aspx 에 적용할꺼다

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" StylesheetTheme="main" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>제목 없음</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

//아래의 컨트롤들은 테마와 스킨이 적용된 상태
        <asp:Label ID="Label1" runat="server" BackColor="Silver" BorderColor="Gray" ForeColor="Black"
            Height="19px" Text="Label" Width="321px"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" SkinID="Test" Height="23px" Width="95px" />&nbsp;
    </div>
    </form>
</body>
</html>

대따 편하다 ㅜ_ㅜ