<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif;
}
a {
color: #000;
text-decoration: none;
cursor: pointer;
}
a:active, a:hover {
text-decoration: underline;
color: #F28011;
}
.btn {
color: #333;
border: 1px solid #333;
background-color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
cursor:pointer;
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #e6e6e6;
border-color: #adadad;
color:#333;
}
.boxTF {
border: 1px solid #999;
padding: 5px 5px;
background-color: #fff;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.selectField {
border: 1px solid #999;
padding: 4px 5px;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.board {
margin: 30px auto;
width: 700px;
}
.title {
width:100%;
font-size: 16px;
font-weight: bold;
padding: 13px 0;
}
.table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table th, .table td {
padding: 10px 0;
}
.table-border tr {
border-bottom: 1px solid #ccc;
}
.table-border thead tr:first-child {
border-top: 2px solid #ccc;
}
.table-list thead tr:first-child{
background: #eee;
}
.table-list td {
text-align: center;
}
.table-list td:nth-child(6n+3) {
text-align: left;
padding-left: 5px;
}
.table-list tbody tr:hover {
background: #efffef;
}
.table-list .chk {
width: 40px;
color: #787878;
}
.table-list .num {
width: 60px;
color: #787878;
}
.table-list .subject {
color: #787878;
}
.table-list .name {
width: 100px;
color: #787878;
}
.table-list .date {
width: 100px;
color: #787878;
}
.table-list .hit {
width: 70px;
color: #787878;
}
.paginate {
clear: both;
text-align: center;
white-space: nowrap;
font-size: 14px;
}
.paginate a {
border: 1px solid #ccc;
color: #000;
font-weight: 600;
text-decoration: none;
padding: 3px 7px;
margin-left: 3px;
vertical-align: middle;
}
.paginate a:hover, .paginate a:active {
color: #6771ff;
}
.paginate span {
border: 1px solid #e28d8d;
color: #000;
font-weight: 600;
padding: 3px 7px;
margin-left: 3px;
vertical-align: middle;
}
.paginate :first-child {
margin-left: 0;
}
</style>
<script type="text/javascript">
function check() {
var f = document.listForm;
// checkbox 이름이 nums 인 요소가 한 개도 없는 경우
if( f.nums === undefined ) { // if(! f.nums ) {
return;
}
// checkbox 이름이 nums 인 요소가 한 개인 경우
if( f.nums.length === undefined ) {
f.nums.checked = f.chkAll.checked;
}
// checkbox 이름이 nums 인 요소가 두 개 이상인 경우
// 동일한 이름은 객체가 두 개 이상인 경우에만 length속성이 존재한다.
// checked 속성 : checkbox, radio 버튼을 선택/해제하거나 선택 유무를 true/false로 반환
for(var i=0; i < f.nums.length; i++){
f.nums[i].checked = f.chkAll.checked;
}
}
function deleteList() {
var f = document.listForm;
var cnt = 0;
if( ! f.nums ){
return;
}
if( f.nums.length ) {
// nums가 여러 개인 경우
for(var i=0; i<f.nums.length; i++){
if(f.nums[i].checked) {
cnt++;
}
}
} else {
// nums가 하나인 경우
if(f.nums.checked) {
cnt++;
}
}
if( cnt === 0 ){
alert("삭제할 게시물을 먼저 선택하세요");
return;
}
if( confirm("선택한 게시글을 삭제하시겠습니까 ? ")) {
alert("삭제 Ok...");
}
}
</script>
</head>
<body>
<div class="board">
<div class="title">
<h3><span>|</span> 게시판</h3>
</div>
<table class="table">
<tr>
<td align="left" width="50%">
<button type="button" class="btn" onclick="deleteList();">삭제</button>
</td>
<td align="right">
<select name="rows" id="rows" class="selectField">
<option value="5">5개씩 출력</option>
<option value="10" selected="selected">10개씩 출력</option>
<option value="20">20개씩 출력</option>
<option value="30">30개씩 출력</option>
<option value="50">50개씩 출력</option>
</select>
</td>
</tr>
</table>
<form name="listForm" method="post">
<table class="table table-border table-list">
<thead>
<tr>
<th class="chk">
<input type="checkbox" name="chkAll" id="chkAll" onclick="check();" style="margin-top: 3px;">
</th>
<th class="num">번호</th>
<th class="subject">제목</th>
<th class="name">작성자</th>
<th class="date">작성일</th>
<th class="hit">조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="nums" value="2" style="margin-top: 3px;"></td>
<td>2</td>
<td>
<a href="">HTML 강좌...</a>
</td>
<td>홍길동</td>
<td>2017-03-03</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="nums" value="1" style="margin-top: 3px;"></td>
<td>1</td>
<td>
<a href="">자바 강좌...</a>
</td>
<td>김자바</td>
<td>2017-01-10</td>
<td>1</td>
</tr>
</tbody>
</table>
</form>
<table class="table">
<tr height="50">
<td align="center">
<div class="paginate">
<span>1</span>
<a href="#">2</a>
<a href="#">3</a>
</div>
</td>
</tr>
</table>
<table class="table">
<tr height="45">
<td width="100">
<button type="button" class="btn">새로고침</button>
</td>
<td align="center">
<form name="searchForm" action="" method="post">
<select name="condition" class="selectField">
<option value="all">제목+내용</option>
<option value="name">작성자</option>
<option value="regDate">등록일</option>
<option value="subject">제목</option>
<option value="content">내용</option>
</select>
<input type="text" name="keyword" value="" class="boxTF">
<button type="button" class="btn">검색</button>
</form>
</td>
<td align="right" width="100">
<button type="button" class="btn">글올리기</button>
</td>
</tr>
</table>
</div>
</body>
</html>