'Theme'에 해당되는 글 2건

Programming/.NET
만들어진 Theme는 특정 페이지에는 물론 웹사이트전체에도 적용할 수 있습니다. 테마를 적용하는데는 두가지 방법이 있는데 Theme와 StylesheetTheme 가 그것입니다.

Theme는 컨트롤 개별적으로 스타일이 정의되어 있다 하더라도 테마에 같은 스타일이 존재하면 테마의 속성이 우선적으로 적용되지만 StylesheetTheme 는 개별적인 스타일속성을 더 우선으로 처리하게 됩니다.

만들어둔 테마(Theme)를 웹사이트전체에 적용하려면 Web.config 파일을 코드 1-1처럼 수정합니다.
<location>
  <system.web>
    <pages theme="MyTheme"></pages>
  </system.web>
</location>
▶ 코드 1-1

만약 웹사이트전체가 아닌 특정 폴더안에만 적용하는 경우라면 코드 1-1에서 location 요소안에 path 속성을 사용하여 적용하고자 하는 위치를 지정하면 됩니다.
<location path="content">
  <system.web>
    <pages theme="MyTheme"></pages>
  </system.web>
</location>
▶ 코드 1-2

테마를 페이지단위로 적용하려면 해당 페이지의 Page 지시자에 Theme 속성을 사용하여 원하는 테마를 지정하면 됩니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="content.aspx.cs" Inherits="content" Theme="MyTheme" %>
▶ 코드 1-3

만약 Web.config 를 통해 웹사이트나 폴더전체에 Theme가 적용된 경우 특정 페이지에서 해당 Theme의 영향을 받지 않게 하려면 Page 지시문에 EnableTheming 속성의 값을 false로 지정합니다. 그러면 해당 페이지는 테마의 적용을 받지 않게 됩니다.(참고로 페이지가 마스터페이지를 사용하는 컨텐츠페이지라면 마스터페이지에서의 EnableTheming 속성이 우선합니다.)

페이지나 사이트전체에 테마를 적용하면 안에 있는 컨트롤에서 테마가 적용되는 것을 볼 수 있는데 이때 만약 지정한 테마에 같은 컨트롤에 대한 여러 스타일이 생성되어 있는 경우라면 대상 컨트롤에서는 SkinID 속성을 사용하여 해당 스타일의 ID를 지정해야 합니다.
<asp:button runat="server" ForeColor="RoyalBlue" BackColor="Silver" SkinID="button1" />
<asp:button runat="server" ForeColor="Red" BackColor="Blue" SkinID="button2" />
▶ Button.skin 내용
<asp:Button ID="Button1" runat="server" Text="확인" SkinID="button2" />
▶ SkinID 지정

다만 skin 파일에도 ForeColor 속성이 존재하고 skin파일의 영향을 받을 컨트롤에도 ForeColor 속성이 존재한다면 이때는 테마가 우선 적용되므로 컨트롤에서의 속성은 무효화됩니다.(Theme 를 사용해 테마를 적용한 경우)

꼭 컨트롤에서의 속성이 우선 적용되어야 한다면 컨트롤의 EnableTheming 속성을 사용해 이 속성의 값을 false 해야 합니다. 그렇게 되면 해당 컨트롤은 테마의 적용을 받지 않게 되어 자연스럽게 개별스타일 속성을 따라가게 할 수 있습니다.

사용자 정의 컨트롤을 만드는 경우에도 테마적용부분을 고려해야 하는데 사용자정의컨트롤 자체적으로 스타일을 정의하고자 하는 경우라면 테마의 적용을 받아서는 안될것입니다.
[Themeable(false)]
public partial class WebUserControl : System.Web.UI.UserControl
▶ 같은 방법으로 속성(property)에도 적용할 수 있습니다.

페이지 단위에서 EnableTheming 속성이 false 로 지정된 경우 당연히 해당 페이지에 소속된 컨트롤에는  테마가 적용되지 않는데 이 상태에서 컨트롤의 EnableTheming 속성이 true 가 된다면 페이지의 EnableThe
ming 속성과는 상관없이 컨트롤에 개별적으로 테마가 적용됩니다.
0 0
Programming/.NET
ASP.NET 에서는 웹사이트의 시각적인 표현을 위해서 테마(Theme) 라는 기능을 제공하고 있습니다. Theme를 사용하기 이전에 어떻게 내가 원하는 Theme를 만들 수 있는지 알아보고자 합니다.

Theme를 만들기 위해서는 우선 프로젝트에서 마우스 오른쪽 버튼을 눌러 'Add -> Add ASP.NET Folder -> Theme'를 선택하거나 'Add -> New Folder'를 선택하고 이름을 'App_Themes' 라고 지정하여 Theme를 위한 폴더를 생성해야 합니다.

▶ 그림 1-1

첫번째 방법으로 폴더를 생성한 경우 그림 1-1 처럼 하위에 기본적으로 Theme1 폴더를 생성하는데 보시는 바와 같이 Theme 에 사용될 폴더는 독특한 아이콘모양을 가지고 있습니다. 자동으로 만들어진 폴더를 그대로 사용할 필요는 없고 해당 폴더를 삭제하여 새로 만들거나 혹은 폴더의 이름을 만들고자 하는 테마의 성격에 맞는 이름으로 변경합니다.

그리고 다시 테마폴더에서 마우스 오른쪽 버튼을 눌러 'Add -> Skin File'을 선택하여 Theme에 적용할 파일을 생성합니다.


예제에서는 Button.skin, Label.skin, TextBox.skin 파일 세개를 만들었으며 이름에서도 알 수 있듯이 각각의 파일은 Button, Label, TextBox 컨트롤에 적용할 스타일을 만드는데 사용될 것입니다. 다만 예제에서처럼 컨트롤마다 skin 파일을 생성할 필요는 없으며 파일 하나에 모든 스타일을 구현하는것도 가능합니다. 어떤식으로 Theme를 구성할지는 개발자의 몫입니다.

하나 더 덧붙이자면 App_Themes 밑에 현재 MyTheme 폴더 하나만을 생성하였는데 만들 테마가 여러개라면 해당 테마의 성격에 맞는 테마폴더를 여러개 만들 수도 있습니다. 이렇게 하면 추후 테마를 적용할때 여러개의 테마중 원하는 테마를 적용하고 관리하기가 쉬어집니다.

이제 만들어진 각 파일을 열어 원하는 형태의 스타일을 구현합니다.
<asp:button runat="server" forecolor="RoyalBlue" backcolor="Silver" />
▶ 코드 1-1

코드 1-1의 내용은 Button.skin 파일의 내용인데 일반적으로 컨트롤을 생성할때의 코드와 매우 유사하며 스타일을 정의할때 사용하는 속성도 컨트롤의 그것과 일치합니다. 다만 차이점은 ID가 없다는 것으로 코드 1-1의 내용은 button 컨트롤에 대한 스타일을 정의한 것이지 컨트롤 자체를 나타내는 것이 아니기에 컨트롤을 식별하는 ID 속성이 필요하지 않는 것입니다.

하지만 스타일자체는 경우에 따라 SkinID라는 속성이 필요할때도 있는데 이 속성은 컨트롤의 ID속성이 아닌 스킨자체에 대한 식별을 위해 필요한 속성입니다. 예를 들어 코드 1-1 에서 추가로 또 하나의 button 스타일이 작성된 경우
<asp:button runat="server" forecolor="RoyalBlue" backcolor="Silver" />
<asp:button runat="server" forecolor="Red" backcolor="Blue" />
▶ 코드 1-2

과연 button 컨트롤에 어느쪽의 스타일을 적용할지 알 수 없으므로 이때 SkinID 속성을 추가하여 각각의 스타일을 구분지어 줘야 하는 것입니다.
<asp:button runat="server" ForeColor="RoyalBlue" BackColor="Silver" SkinID="button1" />
<asp:button runat="server" ForeColor="Red" BackColor="Blue" SkinID="button2" />
▶ 코드 1-3

테마폴더(MyTheme)안에는 skin 파일뿐만 아니라 CSS파일도 추가하여 테마로 구성할 수 있으며 CSS파일을 테마의 일부분으로서 활용하는데 그 어떤 옵션도 필요하지 않습니다. 기존에 만들어 두었던 CSS 파일을 테마폴더안에 추가하기만 하면 CSS안에 정의된 내용대로 스타일을 적용할 수 있습니다.

이미지도 마찬가지 인데 페이지나 혹은 skin, css 파일등에서 이미지를 사용하는 경우 필요한 이미지또한 테마폴더에 추가하여 사용할 수 있습니다.


css나 skin 안에서 이미지를 사용할때의 경로는 '[이미지폴더]/[대상파일]' 형식으로 지정합니다.

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] PlaceHolder  (0) 2014.02.27
[ASP.NET] HtmlControl  (0) 2014.02.26
[ASP.NET] 테마 (Theme) 1 - 테마구성(제작)하기  (0) 2014.02.25
[ASP.NET] HtmlContainerControl  (0) 2014.02.24
[ASP.NET] RangeValidator  (0) 2014.02.21
[ASP.NET] Label  (0) 2014.02.20
0 0
1
블로그 이미지

클리엘