게시판리스트 스타일 수정 및 아이콘 추가

하얀성 2023. 11. 24. 13:58
<소스코드>
<!-- Google Material Icons 스타일시트 -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<style>
    .table-board {
        width: 700px;
        margin: 20px auto;
        border-collapse: collapse;
    }
    .table-board th, .table-board td {
        padding: 8px;
        text-align: center;
        border: none; /* 세로줄 제거 */
    }
    .table-board th {
        background-color: #ffd700; /* 헤더 배경 황금색 */
        font-weight: bold;
    }
    .table-board tr:not(:last-child) {
        border-bottom: 1px solid #ddd; /* 가로줄 추가 */
    }
    .search-box {
        text-align: center;
        padding: 10px 0;
    }
    .search-box form {
        display: inline-block; /* 검색 폼을 인라인 블록으로 설정 */
        margin: 0 auto;
    }
    .search-box input[type="text"], .search-box input[type="submit"] {
        padding: 5px;
        margin: 0 5px;
    }
    .write-button {
        text-align: right;
        padding: 10px 10px;
        margin-top: 20px; /* 버튼과 테이블 사이의 간격 추가 */
    }
    .write-button a {
        padding: 5px 15px;
        background-color: #f2f2f2; /* 버튼 배경색 */
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333; /* 글자색 */
    }
    .write-button a:hover {
        background-color: #ffd700; /* 버튼 호버 배경색 황금색 */
    }
    .pages {
        text-align: center;
        padding: 20px 0;
    }
    .pages a {
        padding: 5px 10px;
        margin: 0 2px;
        border: 1px solid #ddd;
        background-color: #f2f2f2;
        color: #333;
        text-decoration: none;
    }
    .pages a:hover {
        background-color: #ffd700; /* 페이지네이션 호버 배경색 황금색 */
    }
	 .material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    }
    .button {
        padding: 5px 15px;
        background-color: #f2f2f2; /* 버튼 배경색 */
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333; /* 글자색 */
        cursor: pointer;
    }

    .button:hover {
        background-color: #ffd700; /* 버튼 호버 배경색 황금색 */
    }
    .write-button a {
        padding: 5px 15px;
        background-color: #f2f2f2;
        text-decoration: none;
        border: 1px solid #ddd;
        color: #333;
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }

</style>
<?php 
$con = mysql_connect("localhost","root","apmsetup");
mysql_select_db("comma",$con);
$result = mysql_query("select * from $board order by id desc", $con);
$total = mysql_num_rows($result);
?>

<!-- 중앙 정렬을 위해 div 컨테이너 추가 -->
<div style="text-align: center;">
	<h1>게시판</h1>
	<div class="search-box">
        <!-- 검색 폼 -->
        <form method="post" action="search.php?board=<?php echo $board; ?>" style="display: flex; align-items: center; justify-content: center;">
            <select name="field" style="margin-right: 5px; padding: 6px 10px; font-size: 1em;">
				<option value="writer">글쓴이</option>
				<option value="topic">제목</option>
				<option value="content">내용</option>
			</select>
            <input type="text" name="key" size="13" style="margin-right: 5px;">
            <button class="button" type="submit" style="margin: 0;">
                <span class="material-symbols-outlined">search</span>
            </button>
        </form>
    </div>

	<!-- 게시글 목록 -->
	<table class="table-board">
		<tr>
			<th width="50">번호</th>
			<th width="100">글쓴이</th>
			<th width="400">제목</th>
			<th width="150">날짜</th>
			<th width="50">조회</th>
		</tr>
		<?php
		if (!$total) {
			echo "<tr><td colspan='5' align='center'>아직 등록된 글이 없습니다.</td></tr>";
		} else {
			if   ($cpage=='') $cpage=1;    // $cpage -  현재 페이지 번호
			$pagesize = 5;                // $pagesize - 한 페이지에 출력할 목록 개수
			$totalpage = (int)($total/$pagesize);
			if (($total%$pagesize)!=0) $totalpage = $totalpage + 1;
			$counter=0;
			while($counter<$pagesize):
				$newcounter=($cpage-1)*$pagesize+$counter;
				if ($newcounter == $total) break;
				$id=mysql_result($result,$newcounter,"id");
				$writer=mysql_result($result,$newcounter,"writer");
				$topic=mysql_result($result,$newcounter,"topic");
				$hit=mysql_result($result,$newcounter,"hit");
				$wdate=mysql_result($result,$newcounter,"wdate");
				$space=mysql_result($result,$newcounter,"space");
				$t="";
				if   ($space>0) {
					for ($i=0 ; $i<=$space ; $i++)
						$t = $t . "&nbsp;";     // 답변 글의 경우 제목 앞 부분에 공백을 채움
				}
				echo "<tr>";
				echo "<td align='center'>{$id}</td>";
				echo "<td align='center'>{$writer}</td>";
				echo "<td align='left'>{$t}<a href='content.php?board=$board&id=$id'>{$topic}</a></td>";
				echo "<td align='center'>{$wdate}</td>";
				echo "<td align='center'>{$hit}</td>";
				echo "</tr>";
				$counter++;
			endwhile;
		}
		?>
		 <tr>
			<td colspan="4"></td> <!-- 여기서 colspan은 기존 컬럼 수에 맞춰 조정 -->
			<td class="write-button">
				<a href="input.php?board=<?php echo $board; ?>">
					<span class="material-symbols-outlined">edit</span>
				</a>
			</td>
        </tr>
	</table>

	<!-- 아이콘을 사용한 쓰기 링크 -->
        


	<!-- 페이지나누기 -->
	<div class="pages">
		<?php
		if ($cblock=='') $cblock=1;   // $cblock - 현재 페이지 블록값
		$blocksize = 10;               // $blocksize - 화면상에 출력할 페이지 번호 개수
		$pblock = $cblock - 1;        // 이전 블록은 현재 블록 - 1
		$nblock = $cblock + 1;        // 다음 블록은 현재 블록 + 1
		$startpage = ($cblock - 1) * $blocksize + 1;	// 현재 블록의 첫 페이지 번호
		$pstartpage = $startpage - 1; // 이전 블록의 마지막 페이지 번호
		$nstartpage = $startpage + $blocksize; // 다음 블록의 첫 페이지 번호

		if ($pblock > 0) // 이전 블록이 존재하면 [이전블록] 버튼을 활성화
			echo "<a href='show.php?board=$board&cblock=$pblock&cpage=$pstartpage'>이전블록</a> ";

		for ($i = $startpage; $i < $nstartpage && $i <= $totalpage; $i++) {
			echo "<a href='show.php?board=$board&cblock=$cblock&cpage=$i'>$i</a>";
		}
		 
		if ($nstartpage <= $totalpage) // 다음 블록의 시작 페이지가 전체 페이지 수보다 작으면 [다음블록] 버튼 활성화  
			echo "<a href='show.php?board=$board&cblock=$nblock&cpage=$nstartpage'>다음블록</a> ";
		?>
	</div>
</div>

<?php
mysql_close($con);
?>
데이터구조