4.HTML활용


  지금까지 배운 내용만 가지고도 일반적인 웹문서를 작성할 수 있다. 그러나 보다 복잡한 홈페이지를 구성하기 위해서는 몇가지 사항이 남아있다.

4.1 Table

  화면에 출력되는 문서에 표가 들어가는 경우가 종종 있는데, 원래 이러한 것을 하기위해서 TABLE를 사용한다. 그러나, 화면에 보다 복잡한 형태 즉, 신문처럼 단락단락별로 구분되는 페이지를 만들기 위해서 주로 사용되고 있다. ( 이 페이지도 소스를 보면 알겠지만, Table Tag를 많이 썼다는 것을 알 수 있을 것이다.) 대부분의 사이트들은 보통 5~10개 사이의 Table을 가지고 있도록 개발된다.

  • Table의 문법

    <TABLE BORDER=1>
    <CAPTION>타이틀</CAPTION>
    <TR>
        <TD>11111</TD>
        <TD>22222</TD>
        <TD>3333;3</TD>
    </TR>

    <TR>
        <TD>44444</TD>
        <TD>55555</TD>
        <TD>66666</TD>
    </TR>
    </TABLE>
    타이틀
    111112222233333
    444445555566666

      CAPTION   CAPTION으로 지정된 "타이틀"이라는 글자는 TABLE의 크기에 맞추어진다. 그러나, CAPTION Tag는 실전에서는 거의 사용되지 않는다.


  • Table의 속성

      * 먼저 TABLE Tag에 지정할 수 있는 속성을 다음과 같다.
      BORDER테두리의 두께, Default값은 1
      WIDTH,HEIGHT테이블의 넓이, 높이( %단위 가능 )
      BACKGROUND테이블의 바탕 이미지 지정
      ALIGN테이블의 정렬방식
      BGCOLOR테이블의 기본 배경 색상
      BORDERCOLOR테이블 테두리의 색상
      CELLSPACING테이블 내의 셀들간의 간격
      CELLPADDING글자와 셀의 외벽까지의 간격


      * TR Tag에 지정할 수 있는 속성으로 해당 열전체 영향을 준다.
      ALIGN수평적 정렬방식으로, left,center,right,justify,char가 있다.
      VALIGN수직적 정렬방식으로, top,middle,bottom,baseline이 있다.
      BGCOLOR해당 열의 배경색


      * TD Tag에 지정할 수 있는 속성으로 해당 셀에만 영향을 준다.
      ALIGN수평적 정렬방식으로, left,center,right,justify,char가 있다.
      VALIGN수직적 정렬방식으로, top,middle,bottom,baseline이 있다.
      BGCOLOR해당 열의 배경색
      NOWRAP설내의 택스트가 설의 넓이를 초과한 경우 자동 줄바꿈하지 않음.
      WIDTH, HEIGHT셀의 넓이 및 높이(픽셀단위, %단위 가능)
      COLSPAN현재의 셀을 가로로 병합시킨다.
      ROWSPAN현재의 셀을 세로로 병합시킨다.


  • 응용방법

    • 테이블 단위의 정렬이 가능하다.
    • 줄단위, 셀단위의 색상, 정렬, 높이, 넓이를 조절할 수 도 있다.
    • 이것을 응용하여 화면에 정렬된 문서를 보여줄 수 있다. (보고서와 같은 문서를 출력하는데 필수적이다.)
    • TABLE안에 또 TABLE을 추가할 수 있다.
    • 화면에 큰 이미지를 출력하는 것이 부담되는 경우 여러조각으로 나눈뒤 TABLE에 넣어 보여준다.
  위의 기능외에도 소용되는 부분이 많다. 그러나, HTML Editor에서는 대부분 TABLE을 지원하는 막강한 기능이 있으므로, 위에서 열거된 Tag만 알면 충분히 사용이 가능하다.
    예제 6 : 다음은 Table에 대한 간단한 예이다.
    Table 주의사항   여기서 주의할점 한가지. 지금은 Table을 많이 넣어봐야 몇 개 안들어가지만, 나중에 CGI를 작성할 때는 얘기가 다르다. 루틴을 돌면서 수천줄의 테이블이 생기는 경우도 있다. 200MHz CPU에, 32MB Memory의 PC에서 1000컬럼에 10000줄정되는 Table을 뿌려본적이 있다. 결과는? Window95는 시스템이 그냥 멈췄고, Window NT에서는 그나마 작동을 하긴 했는데, .........일단, 서버에서 브라우져로는 금방왔다. 그러나, 브라우져가 실제로 화면에 보여주기까지 거의 30분이 넘게 걸렸다. 당연히 PC는 죽은 것 처럼 아무 반응이 없고 HDD만 죽어라 돌아갔었다. 즉, Table은 브라우져가 화면과 Table의 요소들을 계산해서 화면에 뿌리기 때문에 많은 계산이 필요하므로 큰 Table을 작성 할 때는 주의가 필요하다.

- Last Update : 2001.6.19 by Deadfire(http://www.deadfire.net)

HTML 강좌
HTML이란?
웹서버 작동원리
HTML 기초
     - 전체 구조
     - 기본 태그
     - 속성 추가
     - Link/Anchor
     - 목록 Tag
     - 문자와 스타일
     - 기타 Tag
     - 특수 문자 표기
     - 이미지 표기
HTML 활용
     - Table
     - Frame
     - Form
     - Elements
기 타
     - MIME Type
     - 이미지 맵
     - 클라이언트 풀
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master