ASP.NET 테마 및 스킨 개요

  • 아티클

업데이트: 2007년 11월

테마는 페이지와 컨트롤의 모양을 정의하고 웹 응용 프로그램의 페이지, 전체 웹 응용 프로그램 또는 서버의 모든 웹 응용 프로그램 간에 일관된 모양을 적용할 수 있는 속성 설정의 모음입니다.

테마 및 컨트롤 스킨

테마는 스킨, CSS 스타일시트, 이미지 및 기타 리소스와 같은 일련의 요소로 구성됩니다. 테마에는 최소한 스킨이 포함됩니다. 테마는 웹 사이트 또는 웹 서버의 특수 디렉터리에 정의됩니다.

스킨

스킨 파일은 파일 이름 확장명이 .skin이며 Button, Label, TextBox 또는 Calendar 컨트롤과 같은 개별 컨트롤의 속성 설정을 포함합니다. 컨트롤 스킨 설정은 컨트롤 태그 자체와 비슷하지만 테마의 일부로 설정되는 속성만 포함합니다. 예를 들어, 다음은 Button 컨트롤에 대한 컨트롤 스킨입니다.

<asp:button  BackColor="lightblue" ForeColor="black" />

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

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

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

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

CSS 스타일시트

테마에는 CSS 스타일시트(.css 파일)도 포함될 수 있습니다. 테마 폴더에 .css 파일을 넣으면 이 스타일시트는 자동으로 테마의 일부로 적용됩니다. 스타일시트는 테마 폴더에 .css 파일 이름 확장명으로 정의됩니다.

테마 그래픽 및 기타 리소스

테마에는 그래픽과 스크립트 파일이나 사운드 파일과 같은 기타 리소스도 포함될 수 있습니다. 예를 들어 페이지 테마의 일부에는 TreeView 컨트롤에 대한 스킨이 포함될 수 있습니다. 테마의 일부로 확장 단추와 축소 단추를 나타내는 데 사용되는 그래픽을 포함할 수 있습니다.

일반적으로 테마의 리소스 파일은 테마의 스킨 파일과 같은 폴더에 있지만 웹 응용 프로그램의 다른 위치(예: 테마 폴더의 하위 폴더)에 있을 수도 있습니다. 테마 폴더의 하위 폴더에 있는 리소스 파일을 참조하려면 이 Image 컨트롤 스킨에 표시된 것과 같은 경로를 사용합니다.

<asp:Image  ImageUrl="ThemeSubfolder/filename.ext" />

테마 폴더 외부에 리소스 파일을 저장할 수도 있습니다. 물결표(~) 구문을 사용하여 리소스 파일을 참조하면 웹 응용 프로그램은 이미지를 자동으로 찾습니다. 예를 들어, 테마의 리소스를 응용 프로그램의 하위 폴더에 배치하는 경우 다음 코드 예제와 같이 ~/SubFolder/filename.ext 형식의 경로를 사용하여 리소스 파일을 참조할 수 있습니다.

<asp:Image  ImageUrl="~/AppSubfolder/filename.ext" />

테마 범위 지정

단일 웹 응용 프로그램에 대한 테마를 정의할 수도 있고 웹 서버의 모든 응용 프로그램에서 사용할 수 있는 전역 테마를 정의할 수도 있습니다. 테마를 정의하고 나면 @ Page 지시문의 Theme 또는 StyleSheetTheme 특성을 사용하여 개별 페이지에 배치할 수도 있고, 응용 프로그램 구성 파일의 <pages> 요소를 설정하여 응용 프로그램의 모든 페이지에 적용할 수도 있습니다. Machine.config 파일에서 <pages> 요소를 정의하면 서버의 웹 응용 프로그램에 있는 모든 페이지에 테마가 적용됩니다.

페이지 테마

페이지 테마는 컨트롤 스킨, 스타일시트, 그래픽 파일 및 기타 리소스가 포함된 테마 폴더이며 웹 사이트에서 \App_Themes 폴더의 하위 폴더에 만들어집니다. 각 테마는 \App_Themes 폴더의 개별 하위 폴더입니다. 다음 예제에서는 일반적인 페이지 테마를 보여 줍니다. 여기에서는 BlueTheme과 PinkTheme이라는 두 테마가 정의됩니다.

MyWebSite
  App_Themes
    BlueTheme
      Controls.skin
      BlueTheme.css
    PinkTheme
      Controls.skin
      PinkTheme.css

전역 테마

전역 테마는 서버의 모든 웹 사이트에 적용할 수 있는 테마입니다. 전역 테마를 사용하면 같은 서버에서 여러 웹 사이트를 유지 관리할 때 도메인에 대한 전반적인 모양을 정의할 수 있습니다.

전역 테마는 속성 설정, 스타일시트 설정 및 그래픽을 포함한다는 점에서 페이지 테마와 비슷합니다. 하지만 전역 테마는 웹 서버의 전역 폴더인 Themes에 저장됩니다. 전역 테마는 서버의 모든 웹 사이트 및 모든 웹 사이트의 모든 페이지에서 참조될 수 있습니다.

테마 설정 우선 순위

테마의 적용 방법을 지정하여 테마 설정이 로컬 컨트롤 설정보다 우선 순위를 가지도록 지정할 수 있습니다.

페이지의 Theme 속성을 설정하면 페이지와 테마의 컨트롤 설정이 병합되어 컨트롤의 최종 설정이 구성됩니다. 컨트롤과 테마 모두에 컨트롤 설정이 정의된 경우, 테마의 컨트롤 설정이 컨트롤에 있는 모든 페이지 설정을 재정의합니다. 이 전략을 사용하면 페이지의 컨트롤에 이미 개별 속성 설정이 있는 경우에도 페이지 간에 일관된 모양의 테마를 만들 수 있습니다. 예를 들어 이전 버전의 ASP.NET에서 만든 페이지에 테마를 적용할 수 있습니다.

또는 페이지의 StyleSheetTheme 속성을 설정하여 테마를 스타일시트 테마로 적용할 수 있습니다. 이 경우 양쪽에 설정이 정의되어 있으면 로컬 페이지의 설정이 테마에 정의된 설정보다 우선합니다. 이 모델은 CSS 스타일시트에 사용된 모델입니다. 전반적인 모양에 대한 테마를 계속 적용하면서 페이지의 개별 컨트롤의 속성을 설정하기 위해 테마를 스타일시트 테마로 적용할 수 있습니다.

전역 테마 요소는 응용 프로그램 수준 테마의 요소로 부분 대체할 수 없습니다. 전역 테마와 이름이 같은 응용 프로그램 수준 테마를 만들더라도 응용 프로그램 수준 테마의 요소로 전역 테마 요소를 재정의할 수 없습니다.

테마를 사용하여 정의할 수 있는 속성

일반적으로 테마를 사용하여 페이지 또는 컨트롤의 모양이나 정적 콘텐츠와 관련된 속성을 정의할 수 있습니다. 컨트롤 클래스에서 ThemeableAttribute 특성이 true로 설정된 속성만 설정할 수 있습니다.

컨트롤의 모양 대신 동작을 명시적으로 지정하는 속성에서는 테마 값을 사용하지 않습니다. 예를 들어 Button 컨트롤의 CommandName 속성은 테마를 사용하여 설정할 수 없습니다. 마찬가지로 GridView 컨트롤의 AllowPaging 속성이나 DataSource 속성도 테마를 사용하여 설정할 수 없습니다.

컴파일 타임에 페이지의 할당을 위한 코드 식을 생성하는 식 작성기를 테마나 스킨에 사용할 수 없습니다.

테마와 CSS 스타일시트 비교

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

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

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

  • 테마는 스타일시트의 캐스케이드 방식을 사용하지 않습니다. 사용자가 StyleSheetTheme 속성을 사용하여 테마를 명시적으로 적용하지 않은 경우 페이지의 Theme 속성에서 참조하는 테마에 정의된 모든 속성 값은 기본적으로 컨트롤에 선언적으로 설정된 속성 값을 재정의합니다. 자세한 내용은 위의 테마 설정 우선 순위 부분을 참조하십시오.

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

보안 고려 사항

테마를 웹 사이트에 사용하는 경우 보안 문제가 발생할 수 있습니다. 테마를 악의적으로 사용할 경우 다음과 같은 문제가 발생할 수 있습니다.

  • 컨트롤의 동작이 변경되어 의도한 대로 작동하지 않을 수 있습니다.

  • 클라이언트측 스크립트가 삽입되어 사이트 간 스크립팅 위험에 노출될 수 있습니다.

  • 유효성 검사가 조작될 수 있습니다.

  • 중요한 정보가 노출될 수 있습니다.

  • 이러한 일반적인 위험을 완화하려면 다음 사항을 고려해야 합니다.

  • 적절한 액세스 제어 설정을 통해 전역 및 응용 프로그램 테마 디렉터리를 보호해야 합니다. 테마 디렉터리에 대한 파일 쓰기 권한은 신뢰할 수 있는 사용자에게만 부여해야 합니다.

  • 출처를 신뢰할 수 없는 테마는 사용하지 말아야 합니다. 조직 외부에서 가져온 테마는 웹 사이트에 사용하기 전에 악성 코드가 있지 않은지 항상 검사해야 합니다.

  • 쿼리 데이터에 테마 이름이 노출되지 않도록 주의해야 합니다. 악의적인 사용자가 이 정보를 손에 넣으면 개발자가 알고 있는 테마를 사용하여 중요한 정보를 빼낼 수 있습니다.

참고 항목

작업

방법: ASP.NET 페이지 테마 정의

방법: ASP.NET 테마 적용