스타일
업데이트: 2007년 11월
모든 ASP.NET 모바일 컨트롤은 컨트롤이 렌더링되는 방식을 사용자 지정하는 데 사용할 수 있는 스타일 속성을 제공합니다. 페이지의 서로 다른 여러 요소 간에 일관된 스타일을 적용할 수 있도록 스타일을 그룹화하면 편리합니다. 컨트롤 및 장치 기능과 관련된 속성에 액세스하려면 StyleSheet 컨트롤이나 Style 요소를 사용합니다.
.gif "참고") 참고: |
|---|
스타일 속성 설정이 항상 적용되는 것은 아닙니다. 대상 장치에서 특정 스타일을 지원하지 않으면 ASP.NET에서는 해당 스타일을 무시하거나 다른 스타일로 대체합니다. |
스타일 상속
컨트롤에 스타일 속성을 명시적으로 지정하지 않으면, 즉 직접 지정하거나 스타일 참조를 사용하여 간접적으로 지정하지 않으면 컨트롤은 해당 컨테이너의 스타일 속성을 상속합니다. 대부분의 스타일 속성은 기본적으로 null이나 NotSet의 열거형 값으로 설정됩니다. 따라서 명시적으로 설정된 스타일 속성과 그렇지 않은 스타일 속성을 쉽게 구분할 수 있습니다.
명시적으로 스타일 선언
컨트롤의 스타일을 명시적으로 선언하는 방법으로는 두 가지가 있습니다. 한 가지 방법은 스타일 속성을 설정하는 것입니다. 예를 들어, 폼을 만든 다음 이 폼에 Label 컨트롤을 추가한다고 가정합니다. 그러면 레이블은 폼의 자식 컨트롤이 됩니다. 그런 다음 해당 레이블의 Font-Name 속성을 "Arial"로 설정하면 레이블에 Arial 글꼴이 사용됩니다.
자식 컨트롤의 스타일을 명시적으로 설정하는 다른 방법은 컨트롤의 StyleReference 속성을 설정하는 것입니다.
DeviceSpecific 컨트롤을 사용하여 스타일 설정
DeviceSpecific 컨트롤을 통해 스타일 속성을 설정할 수도 있습니다. 다음 예제에서는 대부분의 장치에서 기울임꼴로 표시되고 데스크톱 장치에서는 굵은 글꼴로 표시되는 레이블을 보여 줍니다.
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" >
// A custom method to determine if the page
// is displayed on a mobile device
public bool IsDesktop(System.Web.Mobile.MobileCapabilities
capabilities, String argument)
{
return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet >
<Style Name="ListStyle" Font-Italic="true">
<DeviceSpecific>
<Choice Filter="IsDesktop" Font-Italic="false"
Font-Bold="true" />
</DeviceSpecific>
</Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
<Mobile:Label id="list1" runat=server StyleReference="ListStyle">
Here is some text
</Mobile:Label>
</Mobile:Form>
참조된 스타일의 조회 알고리즘
StyleReference 속성을 통해 스타일이 참조되면 ASP.NET에서는 특정 검사 순서에 따라 적용할 스타일을 결정합니다. 부모 컨테이너 컨트롤에 있는 자식 컨트롤의 경우 자식의 특성을 결정하기 위한 규칙은 다음 목록에 설명되어 있습니다. 여기에서는 예로 Font-Size를 사용합니다.
Font-Size 특성을 자식 컨트롤에 명시적으로 설정한 경우 해당 컨트롤에는 이 설정이 사용됩니다.
그렇지 않고 자식 컨트롤의 StyleReference 속성을 설정한 경우(예: myChild.StyleReference = someStyle) 해당 컨트롤은 참조된 Style 요소(예: someStyle)의 Font-Size 특성 값을 사용합니다. 자식 컨트롤은 다음 단계를 따라 값에 액세스합니다.
현재 MobilePage 인스턴스의 스타일시트에서 참조된 스타일을 찾습니다.
페이지의 스타일시트에서 스타일을 찾지 못하면 시스템 기본 스타일시트를 참조합니다.
두 스타일시트에서 모두 스타일을 찾지 못하면 런타임 오류가 발생합니다.
스타일을 직접 또는 간접적으로 사용할 수 없으면 StyleReference 속성이 설정되지 않은 것이므로 자식 컨트롤은 이 절차를 부모 컨트롤에 재귀적으로 적용하여 Font-Size 특성 값을 가져옵니다.
재귀를 통해 컨트롤 계층 구조에서 최상위 수준에 도달할 때까지 Font-Size 특성의 명시적 값을 찾지 못하면 컨트롤은 기본 글꼴 크기를 사용합니다.
이 알고리즘은 여러 컨트롤에서 참조할 수 있는 별도의 스타일을 허용하며, 상위 컨트롤에서 상속을 지원하고 표준 코딩 및 논리 기준을 따릅니다.
조회 알고리즘에 대한 예외
조회 알고리즘에는 다음 두 가지 예외가 있습니다.
배경색은 부모 개체의 값을 받지 않습니다. 배경색은 동작 CSS 스타일시트와 일관되게 적용됩니다.
DeviceSpecific 컨트롤에는 부모 컨트롤의 값이 상속되지 않습니다. 일반적으로 DeviceSpecific 컨트롤은 특정 컨트롤 또는 특정 컨트롤 종류에 대해 명시적으로 작성됩니다.
스타일시트
ASP.NET 모바일 컨트롤은 제한된 수만큼 스타일을 설정할 수 있는 기본 스타일시트를 제공합니다. 자세한 내용은 StyleSheet를 참조하십시오. 이러한 기본 스타일의 값을 간단하게 재정의하여 원하는 값을 적용할 수 있습니다. 하나의 스타일시트에 배치할 수 있는 <Style> 요소 선언의 수에는 제한이 없습니다. 각 <Style> 요소는 고유한 Name 속성으로 식별됩니다. 다른 컨트롤의 StyleReference 속성을 Name 속성으로 설정할 수 있으므로 해당 스타일을 참조할 수 있습니다. 이 기법을 사용하여 다른 스타일의 스타일을 참조할 수도 있습니다.
외부 스타일시트
여러 컨트롤에 사용할 수 있는 외부 스타일시트를 정의할 수 있습니다. 같은 스타일을 여러 페이지에 사용하려는 경우 외부 스타일시트를 사용하는 것이 좋습니다. 외부 스타일시트를 만들려면 .ascx 파일에 사용자 정의 컨트롤을 만든 다음 여기에 스타일 집합이 포함된 단일 StyleSheet 컨트롤을 배치합니다. 그런 다음 모바일 페이지에 StyleSheet 컨트롤을 배치하고 이 컨트롤의 ReferencePath 속성을 사용자 정의 컨트롤의 상대 URL로 설정하여 이 파일을 참조합니다.
외부 스타일시트 구현
외부 스타일시트를 구현하려면 다음 세 단계를 수행해야 합니다.
Microsoft ASP.NET 모바일 사용자 정의 컨트롤을 .ascx 파일로 작성합니다.
.ascx 파일에 스타일시트 하나를 배치하고 필요한 <Style> 요소를 추가합니다.
스타일시트를 선언하고 외부 스타일시트를 사용할 각 모바일 페이지에 대해 ReferencePath 속성을 사용자 정의 컨트롤의 .ascx 파일 이름으로 설정합니다.
외부 스타일시트에 선언한 모든 스타일은 런타임에 모바일 페이지의 스타일시트에 사용할 수 있도록 ASP.NET 페이지 프레임워크에 제공됩니다. 사용자 정의 컨트롤에 대한 자세한 내용은 사용자 정의 컨트롤을 참조하십시오.
스타일 개체 및 스타일 클래스 특징
Style 개체는 실제 컨트롤이 아니므로 기본 MobileControl 클래스에서 상속되지 않습니다. 이 개체는 <Style> 요소를 통해 페이지의 StyleSheet 컨트롤 안에만 선언할 수 있습니다.
기본 Style 클래스에는 모든 모바일 컨트롤에 공통으로 적용되는 스타일 특성이 포함되고, Style 클래스에서 상속되는 클래스에는 연결된 컨트롤에만 해당하는 추가 스타일 특성이 포함됩니다.
모든 MobileControl에는 Style 개체가 내부적으로 포함됩니다. 그러나 이 Style 개체는 공용 멤버를 통해 노출되지 않습니다. 대신 각 스타일 속성에 대해 MobileControl에는 전용으로 포함된 스타일을 내부적으로 참조하는 공용으로 액세스할 수 있는 속성이 있습니다. 따라서 MobileControl은 Font, ForeColor 및 Wrapping과 같은 스타일 속성을 직접 노출합니다.
스타일 구성
StyleSheet 컨트롤에 스타일을 구성할 수 있습니다. 스타일시트에는 개수에 상관없이 원하는 만큼 스타일 개체를 선언할 수 있습니다. 스타일은 runat=server 특성이 필요 없다는 점을 제외하면 다른 컨트롤과 같은 방식으로 선언됩니다. 자세한 내용은 <Style> 요소를 참조하십시오.
스타일은 StyleReference 속성을 부모 스타일의 이름으로 설정하여 스타일시트의 다른 스타일에서 속성을 상속할 수 있습니다. 이 기능은 모바일 페이지에만 사용할 수 있습니다. 즉, 동일한 모바일 페이지의 스타일시트에 있는 스타일만 참조할 수 있습니다. 컨트롤의 스타일을 스타일시트의 스타일 개체에서 가져오려면 ASP.NET 모바일 웹 페이지에서 StyleReference 특성을 선언하거나 StyleReference 속성을 프로그래밍 방식으로 설정하여 스타일 개체의 StyleReference 속성을 해당 스타일의 이름으로 설정합니다.