강좌 전 태오의 잡담>

드뎌.. 월드컵이 시작됩니다.. 오늘은 한국:잉글랜드의 평가전이 있는 날!!  과연 어떤 시합이 될 것인가?

강좌 시작 >

웹서버 컨트롤을 Html Sever Control과 비교하여 간략히 요약한다면 무엇이라 정의할 수 있을 지 한참을 고민하다 생각해 낸 것이.....

"웹서버 컨트롤은 다중 사용자(Multi Client)를 위한 웹어플리케이션 개발이다" 라고 말할 수 있다.

이번 강좌부터는 드디어 웹 서버 컨트롤을 다루게 되었습니다. 많은 서적들이 이미 나왔고 이미 많은 분들이 한두번을 접해 보았을 부분이기도 합니다. 악꽁이가 계획했던 것 보다 강좌의 진행이 너무 느리긴 했지만 그래도 열심히 할랍니다. 또한 되도록이면 간략한 소개와 몇 가지의 예제로 웹서버 컨트롤도 마무리를 짓고, 본격적인 웹어플리케이션 제작을 위주로 강좌를 전개할까 합니다. 물론 해당 컨트롤 부분에 대해 대충 넘어 간다는 이야기는 아닙니다. 아직 한번도 접해 보지 못하신분들은 새로운 것을 알아간다는 기분으로, 이미 몇 권의 서적을 구입하여 이미 개발에 착수 하신 분들은 복습 차원에서 봐주시기 바랍니다.

System.Web.UI.WebControls 네임스페이스에 있는 웹서버 컨트롤의 Hierachy이다.
웹서버 컨트롤은 HTML 서버 컨트롤과 비교하여 HTML 요소로 1:1 맵핑되진 않는다. 하지만 이런 이유로 HTML로 구현이 불가능한 부분 까지도 제공되기도 한다. 웹 서버 컨트롤은 HTML 서버 컨트롤의 모든 기능(HTML 요소에 대한 일대일 매핑 제외)과 함께 다음 추가 기능을 제공한다.

이러한 기능들 중 악꽁이가 가장 맘에 들어하는 부분은 웹서버 컨트롤은 클라이언트 타입을 자동으로 추적하여 클라이언트 환경에 맞게 자동 렌더링 된다는 부분이다. 사용자 브라우저가 IE 든 DHTML을 지원하지 않는 브라우저든, PDA든 휴대폰이든 상관 없다는 이야기이다.

한가지 예제를 통해 웹서버 컨트롤의 계층 구조가 사용되는 것과 웹서버 컨트롤을 사용하여 IE와 모바일 익스플로러 에뮬레이터를 통해 동일한 결과가 나오는 지 비교해 보자.

먼저 하나의 웹폼 파일을 추가한 후 도구상자의 Web Forms 탭에서 Panel 컨트롤을 추가한다. 다른 강좡에서 자세히 나오겠지만 Panel 컨트롤을 컨테이너 역할을 하는 컨트롤로 다른 컨트롤이나 텍스트를 포함할 수 있다. 다음으로 버튼 컨트롤을 하나 추가한다.

이에대한 결과를 IE6.0과 모바일 에뮬레이터에서 비교 해 보았다. 다음의 IE6.0과 Microsoft Mobile Explorer Emulator 3.0에서의 결과물이다. 웹폼이 Load되었을 때와 이벤트가 발생 되었을때의 결과물을 비교해 보면 ASP.NET의 웹서버 컨트롤을 이용하여 만든 어플리케이션은 서두에서 말했듯이 멀티 클라이언트를 지원한다는 걸 알 수 있을 것이다.

동적으로 생성된 컨트롤이며, 사용자를 고려하여 자동 렌더링된다는 말들을 단 세 줄의 코딩으로 증명해 보았다. 그럼 이제 본격적인 강좌에 들어가 웹 서버 컨트롤의 공통 속성에 대해 알아 보자.

웹서버 컨트롤은 위의 "웹서버 컨트롤 Hierachy"에서 살펴 보았듯이 거의 대부분의 컨트롤들은 WebControl Class로 부터 상속받아 그에 따른 공통적인 property를 가지고 있다. 하지만 Literal, PlaceHolder, Repeater 및 Xml은 WebControl 클래스에서 상속된 웹 서버 컨트롤이 아니므로 주의해야 한다

AccessKey	컨트롤의 바로 가기 키(선택키)로, 사용자가 Alt 키와 함께 누를 수 있는 단일 문자 또는 숫자를 지정한다. 예를 들어, 사용자가 Alt+K를 눌러 컨트롤에 액세스하게 하려면 "K"를 지정한다. 바로 가기 키는 Internet Explorer 4.0 이상 버전에서만 지원된다.
Attributes	공개 속성에서 정의하지는 않았지만 렌더링해야 하는 컨트롤의 추가 특성 컬렉션. 웹 서버 컨트롤에서 정의하지 않은 모든 특성이 이 컬렉션에 추가된다. 따라서 컨트롤에서 직접 지원하지 않는 HTML 특성을 사용할 수 있다. 참고 이 속성은 프로그래밍 단계에서만 사용할 수 있으며 컨트롤을 선언할 때는 설정할 수 없다.
BackColor	컨트롤의 배경색. 색 이름("black", "red") 또는 16진수로 표시한 RGB 값("#ffffff") 같은 표준 HTML 색 식별자를 사용하여 BackColor 속성을 설정할 수 있다.
BorderColor	컨트롤의 테두리 색. 색 이름("black", "red") 또는 16진수로 표시한 RGB 값("#ffffff") 같은 표준 HTML 색 식별자를 사용하여 BorderColor 속성을 설정할 수 있다.
BorderWidth	컨트롤 테두리가 있을 경우 테두리의 너비를 픽셀 단위로 지정. 참고 Internet Explorer 4.0 이하 버전의 브라우저에서는 일부 컨트롤에서 이 속성이 작동하지 않을 수도 있다.
BorderStyle	컨트롤 테두리가 있을 경우 테두리의 스타일을 지정. 사용할 수 있는 값은 다음과 같다.
CssClass	컨트롤에 할당할 CSS 스타일시트
Style	컨트롤의 바깥쪽 태그에서 CSS 스타일 특성으로 렌더링되는 텍스트 특성의 컬렉션. 참고 BackColor와 같은 스타일 속성을 사용하여 스타일 값을 설정하면 이 컬렉션에 있는 해당 값이 자동으로 무시된다. 이 속성을 사용하여 설정한 값은 강력한 형식의 스타일 속성에 자동으로 반영되지 않는다. 일부 컨트롤에서는 컨트롤의 개별 요소에 스타일 속성을 적용할 수 있는 스타일 개체를 지원한다. 그러한 속성은 Style 속성을 통해 지정한 모든 설정을 무시한다.
Enabled	이 속성을 기본값인 true로 설정하면 컨트롤이 작동한다. 이 속성을 false로 설정하면 컨트롤을 사용할 수 없다. 참고 컨트롤을 사용할 수 없게 만들면 컨트롤이 희미하게 표시되고 비활성화된다. 그러나 컨트롤이 숨겨지는 것은 아니다.
Font	선언하는 웹 서버 컨트롤에 글꼴 정보를 제공. 이 속성에는 웹 서버 컨트롤 요소의 여는 태그에서 속성-하위 속성 구문을 사용하여 선언할 수 있는 하위 속성이 들어 있다. 예를 들어, 웹 서버 컨트롤 텍스트의 여는 태그에 Font-Bold 특성을 추가하여 텍스트를 굵게 표시할 수 있다.
ForeColor	컨트롤의 전경색. 참고 Internet Explorer 4.0 이하 버전의 브라우저에서는 일부 컨트롤에서 이 속성이 작동하지 않을 수도 있다.
Height	컨트롤의 높이. 참고 Internet Explorer 4.0 이하 버전의 브라우저에서는 일부 컨트롤에서 이 속성이 작동하지 않을 수도 있다.
TabIndex	탭 순서에서 컨트롤의 위치. 이 속성을 설정하지 않으면 컨트롤의 위치 인덱스는 0이다. 탭 인덱스가 동일한 컨트롤은 웹 페이지에서 선언된 순서에 따라 이동된다. 참고 이 속성은 Microsoft Internet Explorer 4.0 이상 버전에서만 작동한다.
ToolTip	사용자가 마우스 포인터를 컨트롤 위에 놓고 있을 때 표시되는 텍스트. 참고 일부 브라우저에서는 ToolTip 속성이 작동하지 않을 수도 있다. 브라우저에서 이 속성을 지원하는지 확인해야 한다.
Width	컨트롤의 고정 너비. 사용할 수 있는 단위는 다음과 같다. 픽셀 (Pixel) 포인트 (Point) 파이카 (Pica) 인치 (Inch) 밀리미터 (mm) 센티미터 (Cm) 백분율 (Percentage) Em (Em) Ex (Ex) 참고 기본 단위는 픽셀이다. 모든 브라우저에서 모든 단위 형식을 지원하지는 않는다.

Back