- CSS : 공지사항(notice.html)
/* 공지사항 */
.notice table {width: 700px; margin: 0 auto; border-collapse: collapse; table-layout: fixed;}
.notice th {border-top: 3px solid blue; border-bottom: 3px solid blue;}
.notice td {border-bottom: 1px solid gray;}
.notice .col1, .notice .col4 {width: 8%;}
.notice .col3, .notice .col5 {width: 14%;}
.notice th, .notice td {padding: 10px;}
.notice td + td {
text-align: left; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.notice td, .notice td + td + td {text-align: center;}
.notice a {text-decoration: none; color: rgb(80, 80, 80);}
.notice a:hover {color: blueviolet;}
.notice a + span {font-size: .7em; color: black}
.notice .face {width: 8px;}
.notice .number {width: 350px; margin: 0 auto;}
.notice .number::after {content: ''; display: block; clear: both;}
.notice .number div {
width:30px; height: 26px; background: rgb(188, 223, 236); border-radius: 5px;
text-align: center; margin: 20px 10px 0px; padding: 4px 0 0; float: left;
}
.notice .number .select {background: rgb(253, 198, 94); text-decoration: underline;}- HTML : 공지사항(notice.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="notice">
<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>170</td>
<td><a href="detail.html">커몬섬에.. KKK가 온다고 한다구리!!!</a><span> [18]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>41</td>
<td>2022-01-31</td>
</tr>
<tr>
<td>169</td>
<td><a href="detail.html">술래잡기 대회다구리!</a><span> [10]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>22</td>
<td>2022-01-26</td>
</tr>
<tr>
<td>168</td>
<td><a href="detail.html">별똥별이 많이 떨어지는 날이다구리!</a><span> [13]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>15</td>
<td>2022-01-23</td>
</tr>
<tr>
<td>167</td>
<td><a href="detail.html">초롱아귀를 두 배에 매입한다구리!</a><span> [5]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>17</td>
<td>2022-01-20</td>
</tr>
<tr>
<td>166</td>
<td><a href="detail.html">새로운 주민이 이사올 예정이다구리!</a><span> [9]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>22</td>
<td>2022-01-18</td>
</tr>
<tr>
<td>165</td>
<td><a href="detail.html">너굴상점이 증축될 예정이다구리!</a><span> [4]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>35</td>
<td>2022-01-15</td>
</tr>
<tr>
<td>164</td>
<td><a href="detail.html">오늘은 마리님의 생일이다구리!</a><span> [16]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>40</td>
<td>2022-01-10</td>
</tr>
<tr>
<td>163</td>
<td><a href="detail.html">박물관에서 전할 말이 있다고 한다구리!</a><span> [3]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>11</td>
<td>2022-01-07</td>
</tr>
<tr>
<td>162</td>
<td><a href="detail.html">신년맞이 가구 카탈로그 목록이다구리!</a><span> [6]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>52</td>
<td>2022-01-04</td>
</tr>
<tr>
<td>161</td>
<td><a href="detail.html">2022년 커몬섬의 새해가 밝았다구리!</a><span> [10]</span></td>
<td>너굴 <img src="images/face/neo.png" class="face"></td>
<td>48</td>
<td>2022-01-01</td>
</tr>
</table>
<div class="number">
<div><</div>
<div>1</div>
<div class="select">2</div>
<div>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