작성일자 글쓴이 thkmon

야매강좌 php6강 : 표로 디자인하기

야매강좌 php6강 : 표로 디자인하기 

 

표를 이용해서 사이트를 게시판스럽게 만들어봅시다.

기본적으로 html 소스로 표만드는 법을 배우면 되겠죠.

 

(1) 소스를 베끼세요

 <center>
  게시판.

  <table width=’600′ border=1>
  <tr>
  <td>내용</td>
  </tr>
  </table>

</center>

 

이게 기본적인 표 만들기입니다.

가로길이(width) 600 에, 테두리(border)가 1인 표이죠.

아래 그림처럼 됩니다.

 

(2) 여기서 소스를 조금 변경해보겠습니다. 칸을 추가

…

  <table width=’600′ border=1>
  <tr>
  <td>내용1</td>

  <td>내용2</td>
  </tr>
  </table>

…

 

이러면 아래와 같이 됩니다.

(3) 소스를 또 바꿔보죠. 칸을 하나 더 추가!

…

  <table width=’600′ border=1>
  <tr>
  <td>내용1</td>

  <td>내용2</td>

  <td>내용3</td>
  </tr>
  </table>

…

 

이러면 아래와 같이 됩니다.

눈치가 빠르신 분들은 알겠지만,

<tr>로 줄을 만들고,

<td>로 칸을 만드는 겁니다.

 

(4) 줄을 추가

…

  <table width=’600′ border=1>
  <tr>
  <td>내용1</td>

  <td>내용2</td>

  <td>내용3</td>
  </tr>

  <tr>

  <td>둘째줄</td>

  </tr>
  </table>

…

 

아래와 같이 됩니다.

 

아시겠죠?

표 만들기는 자주 해야 될 것이기 때문에, 조금 시간을 들여 설명했습니다.

근데 어차피 나모웹에디터같은 걸 쓰기 때문에 html을 깊게 공부할 필욘 없습니다.

기본만 알아두면 되죠.

하긴 php같은것도 기존의 소스를 변경해서 쓰는게 빠를겁니다. 기본을 배워두고, 소스 보는 법을 익혀두는겁니다.

 

(5) 본격적으로 시작

다음과 같이 만들어봅니다.

현재 모양은 별로 예쁘지 않지만, 소스는 다음과 같습니다.

 <center>
  게시판.

  <table width=’600′ border=1>

  <tr>
  <td>이름</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td>비밀번호</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td>E메일</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td>사이트</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td>제목</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td>내용</td>
  <td><input></td>
  </tr>

 

  <tr>
  <td colspan=’2′><input type=’button’ value=’글쓰기’></td>
  </tr>

  </table>

 

* td colspan=’2’는 두 칸을 차지하라는 겁니다.

 

(6) 좀 더 그럴싸하게 디자인하기

그럴듯하게 만듭시다.

 

소스는 다음과 같습니다.

 <html>
 <head>
  <title> New Document </title>
 </head>

 <body>
  <center>
  ~게시판~

 

<form name=’FORMNAME’ method=’post’ action=’inputexe.php3′>

  <table width=’600′ border=1>
  <tr>
  <td width=’20%’>이름</td>
  <td width=’80%’><input type=’text’ name=’name’ size=’20’></td>
  </tr>

 

  <tr>
  <td width=’20%’>비밀번호</td>
  <td width=’80%’><input type=’text’ name=’passwd’ size=’20’></td>
  </tr>

 

  <tr>
  <td width=’20%’>E메일</td>
  <td width=’80%’><input type=’text’ name=’passwd’ size=’50’></td>
  </tr>

 

  <tr>
  <td width=’20%’>웹페이지</td>
  <td width=’80%’><input type=’text’ name=’passwd’ size=’50’></td>
  </tr>

 

  <tr>
  <td width=’20%’>제목</td>
  <td width=’80%’><input type=’text’ name=’passwd’ size=’50’></td>
  </tr>

 

  <tr>
  <td width=’20%’>내용</td>
  <td width=’80%’><textarea name’content’ rows=10′ cols=’50’></textarea></td>
  </tr>

 

  <tr>
  <td colspan=’2′ align=’center’><input type=’button’ value=’글쓰기’ onClick=”javascript:check_input();”></td>
  </tr>
  </table>
</form>
 

  </center>
 </body>
</html>

 

 

이런겁니다.

이 소스에서 배울 수 있는건 다음과 같습니다.

 

1) 칸의 길이를 조절할 수 있습니다. <td width=’20%’> 하면 전체의 20% 너비가 됩니다.

 

2) input 태그는 속성이 여러개입니다.

   (1) type : 입력할 방식지정합니다.

   ex) text(텍스트), password(패스워드), checkbox(체크박스), radio(라디오버튼), submit(폼데이터전송), reset(취소), hidden(숨김), image(이미지출력)

   (2) name : 전송할 변수 지정합니다.

   (3) value : 전송되는 값을 지정합니다.

   (4) size : 입력양식의 보이는 길이를 지정합니다.

   (5) maxlength : 입력할 수 있는 최대 문자수

 

3) form 태그의 속성은 다음과 같은것들이 있죠.

   (1) name : 이름지정

   (2) method : ‘get’이나 ‘post’를 지정. get은 데이터가 헤더에 붙어 가기때문에 짧은것만 전송됩니다. 길다면 ‘post’로 하면 데이터가 내용에 붙어가죠.

   (3) action : CGI 프로그램이 있는 URL을 지정합니다. CGI란 데이터전송체계 정도로 아시면됩니다.

   (4) target : 결과값을 보여줄 창의 이름을 지정합니다.

 

4) textarea 태그

   (1) name : CGI로 전달될 변수

   (2) cols : 너비 지정. 글자수라고 보면 됩니다.

   (3) rows : 높이 지정. 세로줄 수라고 보면 됩니다.

 

다음강에서 뵙겠습니다.