테마(Theme)와 스킨(Skin)
.NET프로그래밍/ASP.NET 3.5 SP1 2009. 10. 14. 10:22 |
* 테마(Theme)는 한번 만들어 놓고 재사용하는 개념이다.
* 스킨(Skin) : 서버 컨트롤의 스타일을 미리 지정
- 테마(Theme)
: 코드 한줄만 바꿔서, 전체 웹 사이트가 배경색이 검정에서 흰색으로 또는 그 반대로 스타일을 변경
- 테마 적용 범위
- Web Form의 Page 지시문에 Theme 속성 사용 : 해당 페이지만
- Web.config 파일의 <pages Theme="" /> 사용 : 전체 웹 사이트
--> 아래그림의 과정을 통해 "App_Themes"이라는 폴더를 만들고 "App_Themes"폴더안에(하위에) "Black", "White"폴더도 생성한다.
그리고 아래그림과 같이 "Black", "White"폴더에 각각 "새 항목 추가"로 "스킨 파일"형식인 "SkinFile.skin"파일과 "스타일시트"형식인 "StyleSheet.css"파일을 만들고 코드를 각각 입력한다.
--> "Black", "White"폴더에 각각 "스킨 파일"형식인 "SkinFile.skin"파일을 추가하는 화면
--> "Black", "White"폴더에 각각 "스타일시트"형식인 "StyleSheet.css"파일을 추가하는 화면
==> [App_Themes/Black/SkinFile.skin]에 작성한 코드 --> '버튼'의 스킨(Skin)에 적용
<asp:Button
runat="server"
BackColor="Yellow"
ForeColor="Red"
BorderColor="Blue" />
<asp:Button
SkinID="btnLogin"
runat="server"
BackColor="White"
ForeColor="Red"
BorderColor="Blue" />
==> [App_Themes/White/SkinFile.skin]에 작성한 코드 --> '버튼'의 스킨(Skin)에 적용
<asp:Button
runat="server"
BackColor="Yellow"
ForeColor="Red"
BorderColor="Blue" />
==> [App_Themes/Black/StyleSheet.css]에 작성한 코드 --> '웹 페이지'의 "배경(테마)"에 적용
body, div {
background-color:Black;
color:White;
}
input
{
background-color:Black;
border:1px solid white;
color:White;
}
==> [App_Themes/White/StyleSheet.css]에 작성한 코드 --> '웹 페이지'의 "배경(테마)"에 적용
body, div {
background-color:White;
color:Black;
}
input
{
background-color:White;
border:1px solid Black;
color:Black;
}
--> "웹 페이지 전체에 테마를 적용"하기 위해서 "web.config"파일의 '소스코드'에서 "<pages>"태그가 있는 코드 바로위쪽에 코드를 작성한다.(여기서는 "웹 페이지 전체에 테마 적용하기"를 실습해본 후, "<pages>"태그와 관련하여 작성했던 코드를 아래와 같이 주석처리 하였다.)
==> [web.config] 소스코드 중 "<pages>"태그 위에 작성한 코드.(분홍색 형광펜으로 칠한 부분이다.)
<!-- 페이지 전체에 테마 적용하기 -->
<!--
<pages styleSheetTheme="Black" theme="Black">
-->
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</controls>
</pages>
--> "웹 폼(Web Form)"형식의 파일인 "Default.aspx"에도 코드를 작성한다.(= 코드작성 및 디자인하기.)
==> [Default.aspx] 소스코드 및 디자인
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Theme="Black" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
안녕하세요.<br />
<input type="button" value="안녕" />
</div>
</form>
</body>
</html>
--> "새 항목 추가"로 "About.aspx"이름의 "웹 폼(Web Form)"을 추가하고 "About.aspx"소스코드와 디자인을 아래와 같이 작성한다.
==> [About.aspx] 소스코드 및 디자인
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="About.aspx.cs"
Inherits="About" Theme="Black" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css"">
.myButton {
color:Red;background-color:Yellow;border-color:Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>배경은 Yellow 글자색은 Red</h3>
<asp:Button ID="Button1" runat="server" Text="Button"
BackColor="Yellow" ForeColor="Red" BorderColor="Blue" /> <!--[1] -->
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Button"
CssClass="myButton" /> <!--[2] 자주쓰는 버튼의 스타일을 '클래스화'해서 사용 -->
<br />
<br />
<asp:Button ID="Button3" runat="server" Text="Button"
EnableTheming="false" />
<br />
<br />
<asp:Button ID="Button4" runat="server" Text="Button"
SkinID="btnLogin" />
</div>
</form>
</body>
</html>
[실행결과]
--> "[Default.aspx]웹 페이지"에 테마(배경)가 적용된 화면.(웹 페이지에 검은색 배경이 적용되었다.)
--> "[About.aspx]웹 페이지"에 "테마(배경)적용"과 4개의 '버튼'에 각각 다른방법을 통해 "스킨(Skin)"이 적용 된 화면.(위에 있는 소스코드들을 비교해보면서 각각의 '버튼'에 "스킨(Skin)"이 적용된 형태를 볼 것!)
'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글
| FrmTreeView (트리뷰) (0) | 2009.10.15 |
|---|---|
| FrmMenu (메뉴컨트롤) (0) | 2009.10.15 |
| 마스터페이지(*.master) (0) | 2009.10.14 |
| WebUserControl (웹 사용자 정의 컨트롤(=부분 페이지)) (0) | 2009.10.14 |
| WebUpload(자료실 게시판) (0) | 2009.10.14 |