ASP.NET 웹 서버 컨트롤 및 CSS 스타일

아티클
10/22/2014

업데이트: 2007년 11월

ForeColor, BackColor, Height 및 Width 같은 다양한 모양 속성을 설정하여 ASP.NET 서버 컨트롤의 모양을 제어할 수 있습니다. 또한 일부 컨트롤은 다른 스타일 관련 설정을 노출하는 스타일 개체를 지원합니다.

참고:
ASP.NET 웹 페이지는 런타임에 HTML 페이지처럼 동작합니다. 따라서 웹 서버 컨트롤 이외의 페이지에 있는 모든 요소의 모양을 설정하도록 CSS를 사용할 수 있습니다. 또한 CSS 스타일시트 설정을 포함하는 ASP.NET 테마를 정의한 다음 페이지나 사이트에 테마를 적용할 수 있습니다. 자세한 내용은 ASP.NET 테마 및 스킨을 참조하십시오.

ASP.NET 웹 페이지는 런타임에 HTML 페이지처럼 동작합니다. 따라서 웹 서버 컨트롤 이외의 페이지에 있는 모든 요소의 모양을 설정하도록 CSS를 사용할 수 있습니다. 또한 CSS 스타일시트 설정을 포함하는 ASP.NET 테마를 정의한 다음 페이지나 사이트에 테마를 적용할 수 있습니다. 자세한 내용은 ASP.NET 테마 및 스킨을 참조하십시오.

아래 단원에서는 디자인 타임에서 스타일을 사용하는 방법과 프로그래밍 방식으로 스타일을 사용하는 방법을 모두 포함하여 스타일을 직접 설정하는 데 대한 내용을 설명합니다.

모양 속성을 브라우저에 렌더링

페이지를 실행하면 사용자 브라우저의 기능에 따라 모양 속성이 렌더링됩니다. 사용자의 브라우저에서 CSS 스타일시트를 지원하는 경우 모양 속성은 컨트롤을 구성하는 HTML 요소의 스타일 특성으로 렌더링됩니다. 예를 들어, HyperLink 웹 서버 컨트롤을 정의하고 그 ForeColor 속성을 Red로, Bold 속성을 true로, Size 속성을 xx-small로 설정한 경우 사용자의 브라우저에서 스타일시트를 지원하면 컨트롤이 다음과 같이 렌더링됩니다.

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

반면에 사용자의 브라우저에서 스타일을 지원하지 않으면 <font> 요소 같은 다른 방법을 사용하여 컨트롤이 렌더링됩니다. 다음은 위의 예제에서 스타일을 지원하지 않는 브라우저에 대한 렌더링입니다.

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

또한 브라우저에 따라 다르게 렌더링되는 속성에는 BorderWidth와 BorderColor 등도 있습니다.

BorderStyle과 같은 일부 모양 속성은 스타일을 사용하지 않고 렌더링할 수 없습니다. 따라서 스타일을 지원하지 않는 브라우저에서는 이러한 속성이 무시됩니다. 자세한 내용은 ASP.NET 웹 서버 컨트롤 및 브라우저 기능을 참조하십시오.

컨트롤 스타일 개체

컨트롤에서는 ForeColor와 BackColor 같은 모양 속성뿐만 아니라 추가 모양 속성을 캡슐화하는 스타일 개체를 하나 이상 노출합니다. Size, Name, Bold 등과 같이 글꼴과 관련된 개별 속성이 포함된 FontInfo 형식의 개체를 노출하는 Font 스타일 속성을 예로 들 수 있습니다.

일부 컨트롤에서는 컨트롤의 특정 부분에 대한 모양을 설정하는 데 사용할 수 있는 스타일 개체를 노출합니다. 예를 들어 Calendar 웹 서버 컨트롤에는 DayStyle(개별 날짜), SelectedDayStyle(사용자가 선택한 요일, 주 또는 월) 및 WeekendDayStyle과 같은 스타일 개체가 포함되어 있습니다. SelectedDayStyle 스타일 개체를 사용하면 사용자가 선택한 날짜의 BackColor 및 ForeColor 속성을 설정할 수 있습니다.

대부분의 스타일 개체는 테이블 셀의 특성을 설정하므로 Style 또는 TableItemStyle 형식입니다. Font 속성은 FontInfo 형식입니다.

스타일 개체의 우선 순위 및 상속

복합 컨트롤에서는 스타일 개체가 주로 다른 스타일 개체로부터 특징을 상속 받습니다. 예를 들어 Calendar 컨트롤에서 SelectedDayStyle 개체는 DayStyle 개체를 기반으로 합니다. 따라서 SelectedDayStyle의 속성을 명시적으로 설정하지 않으면 DayStyle 개체의 특징이 상속됩니다.

이러한 상속은 사용자가 직접 설정한 스타일 개체 속성의 우선 순위가 높음을 의미합니다. 예를 들어 다음 목록에서는 Calendar 컨트롤에 대한 스타일 개체 속성의 순서를 보여 줍니다. 여기서 우선 순위가 가장 높은 개체 설정이 목록의 맨 끝에 있습니다.

기본 Calendar 컨트롤의 모양 속성
DayStyle 스타일 개체
WeekendDayStyle 스타일 개체
OtherMonthDayStyle 스타일 개체
TodayDayStyle 스타일 개체
SelectedDayStyle 스타일 개체

컨테이너 요소와 텍스트 요소가 구분된 스타일을 다루는 데는 어려움이 따를 수 있습니다. 예를 들어, 컨트롤에 대한 스타일시트가 있고 텍스트 스타일 속성은 링크에, 나머지 스타일은 컨테이너에 적용하려는 경우를 생각해 볼 수 있습니다. Menu 컨트롤에 대한 MenuItemStyle이나 Calendar 컨트롤에 대한 TodayDayStyle 같은 컨트롤의 스타일 속성을 사용하여 스타일을 설정한 경우 큰 문제가 없어 보입니다. 그러나 CssClass 속성을 통해 정의된 스타일을 사용하기는 쉽지 않습니다. ASP.NET에서 서버에 있는 클래스의 내용을 알아낼 방법이 없기 때문입니다. ASP.NET에서는 CssClass 속성에 정의된 스타일을 텍스트 및 컨테이너 요소에 모두 적용하고 인라인 스타일을 추가하여 이 이중 적용에 따른 이중 테두리, 가변 폭 글꼴 확대 등의 잘못된 효과를 차단합니다.

컨트롤의 스타일을 지정하는 가장 좋은 방법은 컨트롤을 통해 정의된 스타일 속성을 사용하고 필요한 경우 스타일시트나 인라인 스타일을 사용하여 개별 요소를 조금씩 조정하는 것입니다. 컨트롤의 스타일 속성을 통해 정의된 스타일을 재정의하려면 스타일시트나 인라인 스타일에 !important CSS 규칙을 사용합니다.

다음 코드 예제에서는 hovernodestyle 요소에 대해 CssClass 속성을 사용합니다. 이 클래스는 myclass 및 a.myclass:visited로 한 번씩 모두 두 차례 정의되므로 a:visited 정의를 재정의합니다.

<%@ Page Language="C#" %>
<html>
<head >
  <asp:sitemapdatasource id="SiteMapSource"  />
  <style type="text/css">
    a:visited 
    {
      color: #000066
    }
    myclass, a.myclass:visited {
      color: #FF0000
    }
  </style>
</head>
<body>
  <form >
    <a href="https://www.Contoso.com">Contoso</a>
    <asp:treeview id="treeview1"  
        initialexpanddepth="1"  
        datasourceid="SiteMapSource" 
        forecolor="#444444" 
        font-names="Verdana" 
        font-size="0.8em">
      <nodestyle font-bold="true" />
      <hovernodestyle cssclass=myclass />
    </asp:treeview>
  </form>
</body>
</html>

CSS 스타일시트를 사용하여 컨트롤의 모양을 사용자 지정하는 경우 인라인 스타일이나 별도의 CSS 파일을 사용할 수 있지만 이 둘을 모두 사용하지는 말아야 합니다. 인라인 스타일과 별도의 CSS 파일을 모두 사용하면 의도하지 않은 결과가 발생할 수 있습니다.

CSS 스타일 및 클래스 직접 제어

컨트롤에서는 모양 속성과 스타일 개체 외에도 CSS 스타일을 좀 더 직접적으로 조작하는 데 사용할 수 있는 두 가지 속성, 즉 CssClass와 Style을 제공합니다. CssClass 속성을 사용하면 컨트롤에 스타일시트 클래스를 할당할 수 있습니다. Style 속성을 사용하면 스타일 특성의 문자열이 현재 상태 그대로 컨트롤에 기록되도록 설정할 수 있습니다. Style 속성을 사용하면 다른 속성을 통해 노출되지 않는 스타일 특성을 설정할 수 있습니다. Style 속성은 스타일을 직접 설정하기 위해 호출할 수 있는 메서드(예: Add, Remove)가 포함된 컬렉션을 노출합니다.

Style 속성에 지정한 설정은 해당하는 각 모양 속성에 반영되지 않습니다. 예를 들어 Style 속성에 background-color:red 문자열을 설정하면 컨트롤이 빨간색 배경으로 렌더링되더라도 BackColor 속성은 빨강으로 설정되지 않습니다. 모양 속성과 Style 속성을 둘 다 설정하면 개별 모양 속성이 Style 속성보다 우선 순위가 높습니다.

다음을 통해 공유

ASP.NET 웹 서버 컨트롤 및 CSS 스타일

모양 속성을 브라우저에 렌더링

컨트롤 스타일 개체

스타일 개체의 우선 순위 및 상속

CSS 스타일 및 클래스 직접 제어

참고 항목

개념

기타 리소스

추가 리소스