lecture Home > ASP.NET > 악꽁이의 ASP.NET 강의

악꽁이의 ASP.NET 강의

   강좌 최초 작성일 : 2002년 05월 02일
   강좌 최종 수정일 : 2002년 05월 03일

   강좌 읽음 수 : 회

   작성자 : acggongi(임 태영)
   편집자 : Taeyo(김 태영)

   강좌 제목 : HtmlButton & HtmlGeneric & HtmlImage Controls

강좌 전 태오의 잡담>

책도 집필해야 하고, 프로젝트도 진행해야 하고.. 강의도 해야하고... 바쁜 건 정말 좋은 걸까?

강좌 시작 >

HtmlButton Server Control

<button id="programmaticID"
OnServerClick="onserverclickhandler"
runat="server" >
버튼, 이미지, 기타 컨트롤들..
</button>

Html 태그 중 Button 태그와 대응하는 서버 컨트롤 입니다. 대표적인 이벤트로는 ServerClick 이벤트를 가집니다. button 요소는 HTML 4.0 사양에 정의되어 있으므로 HtmlButton 컨트롤은 IE 4.0 이후 버전에서만 지원됩니다. HtmlButton 컨트롤의 모양을 변경하는 데는 여러 가지 방법이 있는데, 컨트롤 요소의 여는 태그에 단추의 스타일 특성을 지정하거나, 컨트롤의 여는 태그와 닫는 태그 사이에 삽입하는 텍스트 주위에 서식 지정 요소를 포함시키거나, 클라이언트측 onmouseover 및 onmouseout 이벤트에 속성 값 변경 내용을 지정할 수 있습니다.

세가지 예제를 통해 익혀 보도록 하겠습니다.
첫번째 예제는 button 컨트롤에 약간의 스타일을 적용해 보겠습니다. onmouseover와 onmouseout 및 버튼 컨트롤에 대한 크기, 색 등의 스타일을 적용 시킨 예입니다.


두번째 예제는 버튼에 이미지를 추가하는 예제입니다.

지금까지 보았던 두가지 예제는 모두 Html요소로 스타일 적용이 되는 과정이었습니다. 이번에는 약간 다르게 코드 비하인드를 이용하여 버튼 컨트롤을 제어해 보겠습니다.
먼저 Html 소스보기에서 버튼을 하나 생성합니다.

생성된 버튼은 웹 페이지가 로딩 되는 순간 스타일을 적용 시킬 수 있습니다.
웹페이지의 Load 이벤트에 다음과 같이 스타일을 적용 시킵니다.

HtmlGeneric Control

<span | body | div | font | others
id="programmaticID"
runat="server" >
Content between tags
</span | body | div | font | others>

span, body, div, font 태그들은 HTML에 직접 매핑 되는 서버컨트롤들이 없기 때문에 HtmlGenericControl을 사용하여 프로그램에 접근하게 됩니다. 이 컨트롤에 대한 예제는 비교적 단순하므로 하나의 페이지로 두가지의 예제를 만들어 보았습니다.



HtmlImage Control

<img id="programmaticID"
alt="alttext"
align= top | middle | bottom | left | right
border="borderwidth"
height="imageheight"
src="imageURL"
width="imagewidth"
runat="server" >

Html요소 중 img 태그로 매핑이 되는 컨트롤 입니다. 닫는 태그(</img>)가 필요 없는 이 태그는 각각의 속성들을 동적으로 설정할 수 있는 컨트롤 입니다.
각각의 속성에 대한 설명입니다.

Align
 이미지의 정렬방식 제어
Alt
 이미지를 표시할 수 없는 또는 이미지가 웹서버에서 다운로드되는 동안 이미지의 위치에 표시하게 될 문자
Border
 이미지의 테두리 두께
Height
 이미지의 사이즈 중 높이
Src
 이미지의 경로
Width
 이미지의 사이즈 중 너비

HtmlImage Control에서는 예제를 다루기 보단 몇가지 속성을 더 짚어 보도록 하겠습니다. 먼저 웹폼에 HtmlImage 컨트롤을 하나 추가 한 후 속성 중 src(경로)의 확장 버튼을 클릭하면 'url만들기' 라는 이미지 선택 창이 나옵니다.


URL 형식에 보면 세가지의 이미지 경로 표현방식이 있습니다. "루트상대적", "문서상대적", "절대적" 이 그것인데, 하나하나 선택해 보면 한 파일을 지정하는 표현 방식이 각기 다르다는 걸 확인 할 수 있습니다. 예를 들어 acggongi.gif라는 파일에 대한 HtmlImage 컨트롤의 src는 루트상대적(root relative)일 경우 "/프로젝트명/임의의 폴더/acggongi.gif"가 되며, 문서 상대적(doc relative)일 경우 "임의의 폴더/acggongi.gif"가 됩니다. 마지막으로 절대적(absolute)는 "http://서버명/프로젝트명/임의의폴더/acggongi.gif"가 되는 것 입니다. 여기서 상대적이라는 말과 절대적이라는 말이 크게 구분되는데 절대적 경로는 웹문서가 위치한 정확한 url 즉 그 서버의 http.서비스의 루트부터 지정해 주는 것을 말하며 상대적 경로는 현재의 문서가 있는 위치를 기준으로 다른 디렉토리와 파일명만 지정하는 것을 말합니다.

HtmlImage 컨트롤의 속성에는 "ismap"과 "usemap" 속성이 있습니다. 이는 선택된 이미지의 영역을 구분하여 맵 형식으로 표현 할 때 사용합니다.

잡담 : 개인적인 사정으로 그동안 성실하지 못하여 강좌를 자주 올리지 못했습니다. 이로써 Html 서버 컨트롤은 끝나고, 웹서버 컨트롤을 다루는 시점에서 부지런하게 강좌를 올릴 것을 약속합니다.

Back