웹마스터 팁

  2. Support
  3. 웹마스터 팁

스킨작업에 중요하게 쓰이는 것들

2005.04.12 17:58

ProSense™

study_cellspacing.gif
안녕하세요.

스킨제작에 반드시 필요한것이 html이고 그리고 게시판의 경우 표문서 형식으로 되는게 보통이기 때문에, 여기에 적당한 강좌를 올려봅니다. 제작자 분들에게 많은 도움이 됐음 좋겠습니다.^^

작년 여름쯤에 했던것이라 문구에 장마가 들어가네요..ㅎㅎ; 아직 장마는 멀었지만 문구내용은 무시하시고 보시기 바랍니다.;;

그럼..

태이블태그의 cellspacing 과 cellpadding의 차이점을 알고 style=table-layout:fixed을 적절히 사용하면 홈페이지 및 스킨작업에 아주 적절히 사용할 수 있습니다.

위의 스크린샷은 게시판 목록의 경우 기초부터 순차적으로 접근할 수 있도록 된것입니다. 아래 소스는 위 스크린샷의 순서와 같습니다.
이렇게 보시면 이해가 쉬울것입니다. 차이점등과 있고 없음의 차이만 이해하시면 됩니다.

=======================================================================================|

<br><br>※ 1
<table border=0 cellspacing=0 cellpadding=0 width=80% align=center>
<col width=40></col><col width=></col><col width=100></col><col width=60></col><col width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td>안녕하세요~</td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 2
<table border=0 cellspacing=1 cellpadding=0 width=80% align=center bgcolor=cccccc>
<col width=40></col><col width=></col><col width=100></col><col width=60></col><col width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td>안녕하세요~</td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 3
<table border=0 cellspacing=1 cellpadding=0 width=80% align=center bgcolor=cccccc>
<col bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col bgcolor=ffffff width=100></col><col bgcolor=ffffff width=60></col><col bgcolor=ffffff width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td>안녕하세요~</td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 4
<table border=0 cellspacing=1 cellpadding=3 width=80% align=center bgcolor=cccccc>
<col bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col bgcolor=ffffff width=100></col><col bgcolor=ffffff width=60></col><col bgcolor=ffffff width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td>안녕하세요~</td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 5
<table border=0 cellspacing=1 cellpadding=3 width=80% align=center bgcolor=cccccc>
<col bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col bgcolor=ffffff width=100></col><col bgcolor=ffffff width=60></col><col bgcolor=ffffff width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td>안녕하세요~글 제목이 길어지면 어떤게 되는지 한번 보실래요?</td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 6
<table border=0 cellspacing=1 cellpadding=3 width=80% align=center bgcolor=cccccc>
<col bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col bgcolor=ffffff width=100></col><col bgcolor=ffffff width=60></col><col bgcolor=ffffff width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td><nobr>안녕하세요~글 제목이 길어지면 어떤게 되는지 한번 보실래요?</nobr></td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 7
<table border=0 cellspacing=1 cellpadding=3 width=80% align=center bgcolor=cccccc style=table-layout:fixed>
<col bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col bgcolor=ffffff width=100></col><col bgcolor=ffffff width=60></col><col bgcolor=ffffff width=40></col>
<tr>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<tr>
<td>1</td><td><nobr>안녕하세요~글 제목이 길어지면 어떤게 되는지 한번 보실래요?</nobr></td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
</table>

<br><br><br>※ 8
<!-- list_head.php 파일시작 -->
<table border=0 cellspacing=1 cellpadding=3 width=80% align=center bgcolor=cccccc style=table-layout:fixed>
<col align=center bgcolor=ffffff width=40></col><col bgcolor=ffffff width=></col><col align=center bgcolor=ffffff width=100></col><col align=center bgcolor=ffffff width=60></col><col align=center bgcolor=ffffff width=40></col>
<tr align=center>
<td>번호</td><td>제목</td><td>이름</td><td>날짜</td><td>조회</td>
</tr>
<!-- 끝 -->
<!-- list_main.php 파일시작 (글의 출력수 만큼 반복 되어 실행됩니다.) -->
<tr>
<td>1</td><td><nobr>안녕하세요~글 제목이 길어지면 어떤게 되는지 한번 보실래요?</nobr></td><td>홍길동</td><td>06/25</td><td>20</td>
</tr>
<tr>
<td>2</td><td>곧 장마가 시작됩니다. 농작물 관리...</td><td>강낭콩</td><td>06/25</td><td>30</td>
</tr>
<!-- 끝 -->
<!-- list_foot.php 파일시작 -->
</table>
<!-- 끝 -->
=========================================================================================|
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
phpMyAdmin에서 dump 안 되시는 분들 보세요 [5] 똥가리 2001.11.18
[추천 팁] 디망쉬식 스킨 시스템 [4] 디망쉬 2001.12.11
파일시스템에서 비밀번호 생성/수정/인증 [7] 두기두바 2002.01.10
cron을 이용해 윈앰프 방송정보를 빠르게 분석. [9] Romeo 2002.01.15
이제 홈페이지 업데이트 안하는 수모를 겪지 말자! [7] 담배를끊으면복이옴과 2002.02.02
[re | 씽크식 PHP] 많고 많은 페이지들을 하나로 줄이자! [2] John Sync. 2002.02.24
많고 많은 페이지들을 하나로 줄이자! [7] 제키드+_+)/ 2002.02.23
[씽크식 PHP] 노프레임에서 "역"으로 인클루드 쓰기. [14] John Sync. 2002.02.24
제가 쓰는 alert 함수를 공개하지요.^^ [5] Zeldign 2002.02.25
[OsE=] 오스보드에 적용된 페이징 방법(알고리즘?) OsE= 2002.03.02
[OsE=] 기초적인 정규표현식 [3] OsE= 2002.03.02
많은것을 파일하나로 처리하잣!! [5] 실버 2002.03.05
2번째~~!! DATE값 받아놓기 &상대방 아이피 알아내기~ [7] 실버 2002.03.07
include를 이용한 다음넷 홈페이지 꾸미기1 [10] ZipShin 2002.03.12
include를 이용한 다음넷 홈페이지 꾸미기2(그림 첨부) [4] file ZipShin 2002.03.12
[추천 소스] 최신의 인기가요 뽑아오는 PHP프로그램 [3] 제누스 2002.03.28
[수정본]MP3파일를 검색하여 윈앰프로 실시간 감상하기 제누스 2002.03.28
[Yangkun] (함수) 간단 각종 Global 변수 검사 [1] 양군 2002.03.31
[수정+파일첨부]NZEO처럼 모드 변경 만들기 - with cookie [6] file TheMics 2002.04.07
PHP로 아바타를 구현해 봅시다. [18] ★Zzony~ 2002.05.13
태그 쓰기