- CSS : 자유게시판(free.html)
/* 자유게시판 */
.free table {width: 700px; margin: 0 auto; border-collapse: collapse; table-layout: fixed;}
.free th {border-top: 3px solid blue; border-bottom: 3px solid blue;}
.free td {border-bottom: 1px solid gray;}
.free .col1, .free .col4 {width: 8%;}
.free .col3, .free .col5 {width: 14%;}
.free th, .free td {padding: 10px;}
.free td + td {text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.free td, .free td + td + td {text-align: center;}
.free a {text-decoration: none; color: rgb(80, 80, 80);}
.free a:hover {color: blueviolet;}
.free a + span {font-size: .7em; color: black}
.free .face {width: 12px;}
.free .button {width: 700px; margin: 20px auto 5px; text-align: right;}
.free .button a {
background: rgb(138, 233, 138); border-radius: 3px;
padding: 6px 8px; margin: 25px; text-decoration: none; color: black;
}
.free .button a:hover {color: blueviolet;}
.free .number {width: 350px; margin: 0 auto;}
.free .number::after {content: ''; display: block; clear: both;}
.free .number div {
width:30px; height: 26px; background: rgb(188, 223, 236); border-radius: 5px;
text-align: center; margin: 10px 10px 0px; padding: 4px 0 0; float: left;
}
.free .number .select {background: rgb(253, 198, 94); text-decoration: underline;}- HTML : 자유게시판(free.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자유게시판</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="homebox">
<a href="index.html" class="logo"></a>
</div>
</header>
<nav>
<div class="menubox">
<ul>
<li><a href="notice.html">공지사항</a></li>
<li><a href="free.html">자유게시판</a></li>
</ul>
</div>
</nav>
<main>
<div class="free">
<table>
<tr>
<th class="col1">번호</th>
<th class="col2">제목</th>
<th class="col3">작성자</th>
<th class="col4">조회수</th>
<th class="col5">작성일</th>
</tr>
<tr>
<td>320</td>
<td><a href="detail.html">내가 문제 하나 내볼까? 힐끔힐끔</a><span> [6]</span></td>
<td>조르쥐 <img src="images/face/320.png" class="face"></td>
<td>22</td>
<td>2022-01-20</td>
</tr>
<tr>
<td>319</td>
<td><a href="detail.html">새로 이사 온 미첼이예요~ 동글</a><span> [12]</span></td>
<td>미첼 <img src="images/face/319.png" class="face"></td>
<td>41</td>
<td>2022-01-18</td>
</tr>
<tr>
<td>318</td>
<td><a href="detail.html">날씨가 너무 좋다~ 딩동댕</a><span> [1]</span></td>
<td>드리미 <img src="images/face/318.png" class="face"></td>
<td>7</td>
<td>2022-01-15</td>
</tr>
<tr>
<td>317</td>
<td><a href="detail.html">이몸이 운동 꿀팁을 알려주지! 그러마</a><span> [21]</span></td>
<td>곤잘레스 <img src="images/face/317.png" class="face"></td>
<td>56</td>
<td>2022-01-13</td>
<tr>
<td>316</td>
<td><a href="detail.html">생일 축하해줘서 고마워! 됐거든</a><span> [15]</span></td>
<td>마리 <img src="images/face/316.png" class="face"></td>
<td>32</td>
<td>2022-01-10</td>
</tr>
<tr>
<td>315</td>
<td><a href="detail.html">음.. 아끼는 책을 잃어버렸다... 근데</a><span> [10]</span></td>
<td>호랭이 <img src="images/face/315.png" class="face"></td>
<td>38</td>
<td>2022-01-08</td>
</tr>
<tr>
<td>314</td>
<td><a href="detail.html">나랑 술래잡기 할 사람~ 땡땡!</a><span> [0]</span></td>
<td>빙수 <img src="images/face/314.png" class="face"></td>
<td>5</td>
<td>2022-01-05</td>
<tr>
<td>313</td>
<td><a href="detail.html">으아앗!! 새해인사가 늦어버렸다.. 그쵸</a><span> [5]</span></td>
<td>참돌이 <img src="images/face/313.png" class="face"></td>
<td>15</td>
<td>2022-01-03</td>
</tr>
<tr>
<td>312</td>
<td><a href="detail.html">2022년도 잘 부탁하지. 안그냐</a><span> [6]</span></td>
<td>킹 <img src="images/face/312.png" class="face"></td>
<td>30</td>
<td>2022-01-01</td>
</tr>
<tr>
<td>311</td>
<td><a href="detail.html">다들 새해 복 많이 받으세요~ 우왕</a><span> [3]</span></td>
<td>피터 <img src="images/face/311.png" class="face"></td>
<td>24</td>
<td>2022-01-01</td>
</tr>
</table>
<div class="button"><a href="write.html">글쓰기</a></div>
<div class="number">
<div><</div>
<div>1</div>
<div>2</div>
<div class="select">3</div>
<div>4</div>
<div>...</div>
<div>></div>
</div>
</div>
</main>
<footer>
<div>
<p>Copyright © 김예찬 all rights reserved</p>
</div>
</footer>
</body>
</html>
- 화면구현 페이지
자유게시판
Copyright © 김예찬 all rights reserved
www.yermi.co.kr