강좌 전 태오의 잡담>

재미있는 c# 그리고.. 재미있는 ASP.NET.. ^^;

강좌 시작 >

악꽁이의 강좌도 어느덧 여섯 번째가 되었군요. 악꽁이의 계획으로는 정품이 출시 되기 전까지는 컨트롤들을 다 마치려고 했는데 조금 아쉽고 죄송스럽습니다. 그래도 시작을 했으니 마무리를 해야 되겠죠? 서둘러 컨트롤들을 마쳐야 할 낀데...

1. HtmlTable Control

이번 강좌의 시작은 테이블 입니다. 웹페이지의 정렬에 주로 사용되는 테이블은 디자인 하시는 분들께서 많이 애용(?)을 하시는 컨트롤이기도 하며, 그 덕에(??) 프로그램 하시는 분들은 얽히고 설킨 테이블들을 보며 아주 곤욕을 치루기도 하죠.. 이놈의 테이블의 끝이 어디 인지, 끝날 만 하면 다시 시작하는 테이블들..
HtmlTable Control들은 웹 상에서 테이블을 동적으로 생성 시켜 주시고 하며, 행이나 열 또한 동적으로 추가 삭제 할 수 있게 해주는 컨트롤 입니다.. 다른 컨트롤들과 마찬가지로 직접 Html소스보기로 코딩 작업을 거쳐 생성할 수도 있으며, IDE에서 도구 상자를 이용하여 생성, 편집이 가능합니다. 먼저 문법을 살펴 보면 다음과 같습니다..

여기에서 주의 깊게 보셔야 될 부분은 "Rows" 부분입니다. 바로 뒤에 나오게 될 HtmlTableRow 컨트롤과 관련이 있는 이 속성은 동적으로 표의 행들을 생성하거나 편집 할 수 있게 해 줍니다. 이번 강좌는 그 제목이 HtmlTable 컨트롤 입니다. 여기에 더불어 살펴 보게 될 컨트롤들이 테이블과 직접적으로 관련이 있는 HtmlTableRow 컨트롤과 HtmlTableCell 컨트롤 입니다. 그러다 보니 예제는 각 컨트롤에 대한 문법을 마친 후 보시게 될 겁니다..

자~~! 이제 문법을 보셨죠? 별다른 거 없죠? 정말 없습니다. 그런데 이것 마져 귀찮으시다면 악꽁이와 함께 IDE에서 멩그러 봅시다.

웹폼을 하나 생성하고, 폼 디자이너에서 도구상자를 이용하여 Table을 하나 위치 시킵니다. Default로 3*3 의 테이블이 생성된 걸 확인 하셨죠? 이젠 팝업메뉴를 이용하여 Table컨트롤의 속성을 열어 보세요. 다음과 같은 속성창이 보이 실 겁니다.

테두리 설명
          크기 : border의 역할을 하며, 테이블 선의 두께를 지정합니다.
          색 : bordercolor의 역할을 하며, 테이블 선의 색을 지정합니다.
          하이라이트 & 그림자 : 사용자가 각각의 값을 넣어 속성을 변경합니다.

또한 IDE에서는 테이블에 행과 열을 삽입, 추가, 삭제가 가능하며 셀을 병합할 수도 있습니다.

프론트페이지 같은 웹 에디터에서 흔히 볼 수 있는 기능들 이므로 자세한 설명은 피하도록 하고, 다음으로는 이번 강좌의 두번째 주제인 HtmlTableRow Control에 대한 문법과 속성들을 살펴보겠습니다.

2. HtmlTableRow Control

HtmlTableRow 컨트롤은 기존 Html 태그의 <tr> 요소와 유사합니다. 테이블 내에서 표의 행을 구성하며, 속성 중 Cells에는 셀들의 컬렉션으로 구성되며, 이 속성을 이용하여 동적으로 셀들을 생성 또는 편집이 가능합니다.
IDE에서의 편집 또한 다음과 같이 선택 한 후 속성창에서 그 변경이 가능합니다.

3. HtmlTableCell Control

Html 태그의 td 또는 th 와 유사한 역할을 하며, td는 일반적인 표의 셀을 의미하고, th는 표의 제목이 되는 셀을 의미합니다. 대부분이 HTML의 테이블 생성시 TD 부분의 속성과 유사 하므로 보충하여 설명 드리는 건 지면의 낭비에 불과 할 것 같아 생략하고 IDE에서의 셀 속성 변경은 마우스 모양이 다음과 같이 변하였을 때 선택한 후 Crtl 키를 눌러 여러 개의 셀을 다중 선택 하면 됩니다..

<예제 1>

첫 번째 예제는 테이블 컨트롤이 기존의 테이블과 그렇게 많은 차이 가 없다는 걸 보여 주기 위한 예제를 하나 준비 했습니다. 먼저 친숙함을 느껴 보시기 바랍니다.. 상상력이 풍부하지 않아서 그나마 생각 난 예제 입니다..ㅜㅜ

<예제 2>

모든 서버 컨트롤들은 동적으로 생성, 편집, 삭제가 가능하다고 말했습니다. 테이블 컨트롤 또한 동적 생성이 가능합니다. 그 방법 또한 간단해서 텍스트 박스나 select 박스에 입력된 값을 Row와 Cell에 생성해주면 테이블의 행과 열이 만들어지며, 또한 이렇게 만들어 진 셀들의 규칙에 따라 그 편집이 가능합니다. 일단 한번 보시라니깐요.

결과는 여러분들의 컴퓨터에서 직접 확인해 보시기 바랍니다. 그리고 긴 소스 코드를 작게 줄여서 보여주다 보니 약간 이미지가 뿌옇게 나오는데 이 부분은 양해 바랍니다. 휴~ 또 한 과정의 강좌를 마쳤습니다. 이번 강좌가 나오기 까지 참 많은 시간이 소요된 것 같습니다. 머리가 딸리다 보니.. 멋진 여러분들 멋지게 공부하시고 멋지게 사세요.. 멋진 악꽁이었습니다.(ㅋㅋ)

Back