HTML.테이블이 늘어나도 깨지지 않게 보존하기.

13만원 주고 중고 컴퓨터를 한대 샀더니만.
집에 있는 내 최신형!!  이었던 7년전 컴퓨터보다 좋다. 항상 이런식으로 난 딜레마에 빠진다.-_-

 웹디자이너들이 초반에 가장 흔하게 접하는!! (나만 그랬을지도 모른다.)
테이블이 늘어나도!! 테이블을 감싸고 있는 디자인된 테이블이 깨지지 않게 하기!!! 두둥.
사실 아주 기초적인 것이며, 누구나 한번만 보면 따라할수 있을것이다. 

자 알아보도록 하자. 

1.먼저 늘어남을 방지하기 위한 100% 용 테이블을 하나 디자인 해보겠다.

 저 동그란 테두리 속에 글짜를 적을 예정이며,
이건 한개의 TR,세개의 TD를 가진 하나의 테이블로 만들어 질것이다.
가운데 글짜를 미친듯이 적어도 저 디자인을 보존할수 있게끔 만들어보겠다. 

가장 왼쪽의 이미지는 width=9px,height=26px     : 001.gif
가운데 배경 이미지는 width=1px,height=26px     : 002.gif
가장 오른쪽 이미지는  width=9px,height=26px    : 003.gif

 이렇게 이미지를 저장했다.

 2.테이블 구조를 먼저 생각하자.

 

3.메모장을 열어 HTML태그를 삽입하자.

 

===================================================================================

<table border="0" cellspacing="0" cellpadding="0">(테이블의 크기가 지정되어 있지 않다.)
  <tr>
    <td width="10" height="26"><img src="001.gif" width="9" height="26"></td>
    <td background="002.gif">이곳에 내용을 작성하자</td>
    <td width="10" height="26"><img src="003.gif" width="9" height="26"></td>
  </tr>
</table>

===================================================================================

 

4.가운데 글짜를 미친듯이 적어보자.

 

물론 <br>이나 <p> 같은 줄바꿈 태그가 있어서는 안된다.

줄바꿈 태그까지 막아주는 STYLE은 다음시간에 배워보도록 하고~

가로로 어떠한 길이의 글짜를 적어도 테이블 디자인에 무리가 가지 않는걸 확인할수 있을것이다.

 

 

이건 가로로 만드는 테이블이나 세로로 만드는 테이블이나 원리는 같다.

배경에 일정한 패턴을 가진 이미지가 있다면 테이블 크기가 늘어나도 그 배경이 일정한 패턴으로 깔리기 때문에

아무리 크게 글을 작성 하더라도 테이블은 보존된다.

 

게시판,공지사항,말풍선 등등에 자주 사용되는 테이블 구조.

 

알아두면 좋겠다.

 

오늘은 여기까지 =ㅂ=