최신글 스킨 제작 2 - 기초 예제 (목록 형태)
div+css 구조에 익숙하지 않은 분들을 위해 테이블 형태로 설명하겠습니다.
(div 방식은 배포판에 있는 기본 스킨을 참고하면 됩니다.)
일단 기본 스킨에 있던 상단 내용은 그대로 넣어줍니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
이제 테이블로 간단히 모양을 만들어 보겠습니다.
테이블이든 div 방법이든 상관없고 기본 개념만 파악해서 원하는 형태로 만들면 됩니다.
1. 우선 게시판 타이틀 부분을 만듭니다.
(빨간색 부분이 게시판 설정에서 입력한 게시판 제목이 출력되는 부분입니다.)
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><strong><?php echo $bo_subject; ?></strong></a></td>
</tr>
</table>
타이틀 부분은 특별한 건 없고 원하는 디자인으로 넣기만 하면 됩니다. 필요 없다면 전체를 생략해도 됩니다.
2. 그다음 게시물 제목이 출력되는 부분을 만듭니다.
여기서 가장 핵심 부분은 <?php for ($i=0; $i<count($list); $i++) { ?> 입니다.
게시물 제목은 반복해서 출력되므로 반드시 저걸로 감싸줘야 합니다.
테이블 형태로 만들었다면 <tr>로 구분이 되기 때문에 이렇게 <tr> 위아래로 감싸주면 됩니다.
<table>
<?php for ($i=0; $i<count($list); $i++) { ?>
<tr>
<td>게시물 제목 출력</td>
</tr>
<?php } ?>
</table>
위에서 말한 내용대로 전체를 만들면 이렇게 되겠죠.
<table width="350" border="0" cellspacing="0" cellpadding="0">
<?php for ($i=0; $i<count($list); $i++) { ?>
<tr>
<td height="20">
<?php
//echo $list[$i]['icon_reply']." ";
echo "<a href=\"".$list[$i]['href']."\">";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
echo $list[$i]['subject'];
if ($list[$i]['comment_cnt'])
echo $list[$i]['comment_cnt'];
echo "</a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
if (isset($list[$i]['icon_new'])) echo " " . $list[$i]['icon_new'];
if (isset($list[$i]['icon_hot'])) echo " " . $list[$i]['icon_hot'];
if (isset($list[$i]['icon_file'])) echo " " . $list[$i]['icon_file'];
if (isset($list[$i]['icon_link'])) echo " " . $list[$i]['icon_link'];
if (isset($list[$i]['icon_secret'])) echo " " . $list[$i]['icon_secret'];
?>
</td>
</tr>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<tr><td height="50">등록된 게시물이 없습니다.</td></tr>
<?php } ?>
</table>
처음 내용에서 파란색 부분이 더 추가된 것을 볼 수가 있는데
저 부분은 게시판에 등록된 게시물이 하나도 없을 때 안내 문구를 출력해 주는 부분입니다.
위 코드대로 만들면 기본 스킨하고 출력되는 모양은 같을 겁니다.
여기에 글쓴이 작성날짜 2가지 항목를 추가하고 싶으면 <td>로 칸만 늘려주면 되는데
아래 내용에서 빨간색으로 강조된 부분처럼 게시물 제목이 출력되는 곳에 추가하면 됩니다.
칸 수가 1칸에서 3칸으로 늘어났으니 colspan="3" 도 추가해야 합니다.
<table width="350" border="0" cellspacing="0" cellpadding="0">
<?php for ($i=0; $i<count($list); $i++) { ?>
<tr>
<td height="20">
<?php
//echo $list[$i]['icon_reply']." ";
echo "<a href=\"".$list[$i]['href']."\">";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
echo $list[$i]['subject'];
if ($list[$i]['comment_cnt'])
echo $list[$i]['comment_cnt'];
echo "</a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
if (isset($list[$i]['icon_new'])) echo " " . $list[$i]['icon_new'];
if (isset($list[$i]['icon_hot'])) echo " " . $list[$i]['icon_hot'];
if (isset($list[$i]['icon_file'])) echo " " . $list[$i]['icon_file'];
if (isset($list[$i]['icon_link'])) echo " " . $list[$i]['icon_link'];
if (isset($list[$i]['icon_secret'])) echo " " . $list[$i]['icon_secret'];
?>
</td>
<td width="70"><?php echo $list[$i]['name'] ?></td>
<td width="40" align="center"><?php echo $list[$i]['datetime2'] ?></td>
</tr>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<tr><td height="50" colspan="3">등록된 게시물이 없습니다.</td></tr>
<?php } ?>
</table>
이렇게 항목도 추가하고 컬러나 이미지 등을 활용해 원하는 디자인으로 꾸미면 됩니다.
이미지를 이용해서 꾸미려면 스킨 폴더 안의 img 폴더에 필요한 이미지를 만들어서 넣고
원하는 부분에 <img src="<?php echo $latest_skin_url ?>/img/이미지명.gif"> 이런 방법으로 넣어주면 됩니다.
