<!--// 리스트 -->
<div class="board-search">
	<div class="total-page">페이지정보 : 1 / 10</div>
    <div class="search">
        <form class="" method="post">
        	<label for="bbsOption" class="hide">검색옵션</label>
            <select name="bbsOption" class="select" id="bbsOption">
				<option value="" selected="selected">제목</option>
				<option value="">내용</option>
				<option value="">작성자</option>
            </select>
            <label for="keyword" class="hide">검색어</label>
        	<input type="text" name="keyword" id="keyword" class="input">
			<button type="submit" class="btn btn-pack">검색하기</button>
        </form>
    </div>
</div>

<div class="board-list">
	<table>
		<caption>공지사항 목록</caption>
		<colgroup>
			<col style="width:75px">
			<col>
			<col style="width:120px">
			<col style="width:120px">
			<col style="width:100px">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">번호</th>
				<th scope="col">제목</th>
				<th scope="col">작성자</th>
				<th scope="col">등록일</th>
				<th scope="col">조회수</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="no"><span class="label">공지</span></td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">8</td>
			</tr>
			<tr>
				<td class="no">20</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a> <img src="../images/bbs/icon_new.gif" alt="새 글"></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">8</td>
			</tr>
			<tr>
				<td class="no">19</td>
				<td class="subject"><img src="../images/bbs/icon_reply.gif" alt="답변"> <a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">18</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a> <img src="../images/bbs/icon_secret.gif" alt="비밀글"></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">17</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다. <span class="hide">댓글</span><span class="comment">(2)</span><span class="hide">개</span></a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">16</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">15</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">14</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">13</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">12</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">11</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
			<tr>
				<td class="no">10</td>
				<td class="subject"><a href="#" title="안녕하십니까? 게시판 default 스킨입니다.">안녕하십니까? 게시판 default 스킨입니다.</a></td>
				<td class="name">관리자</td>
				<td class="date">2020.00.00</td>
				<td class="hit">10</td>
			</tr>
		</tbody>
	</table>
</div>

<div class="buttons">
	<div class="fr">
		<a href="#" class="btn-pack medium">글쓰기</a>
	</div>
</div>

<div class="paginate">
    <a class="direction first" href="#"><span>처음페이지</span></a><a class="direction prev" href="#"><span>이전페이지</span></a><a href="#">1</a><strong>2</strong><a href="#">3</a><a href="#">4</a><a class="direction next" href="#"><span>다음페이지</span></a><a class="direction last" href="#"><span>마지막페이지</span></a>
</div>
<!-- 리스트 //-->

<br>
<br>
<br>

<!--// 글쓰기 -->
<script type="text/javascript">
//첨부파일 열 추가
var rowcount = 0;
function append() {
	var tbl = document.getElementById("files_table").getElementsByTagName("TBODY")[0];
	var html1 = "<input name='upfiles[]' type='file' class='input'  style='width: 400px;'>";
	var row = document.createElement("tr");
	var col1 = document.createElement("td");
	row.appendChild(col1);
	col1.innerHTML = html1;
	tbl.appendChild(row);
	rowcount++;
}

function remove() {
	if(rowcount > 0){
		var tbl = document.getElementById("files_table").getElementsByTagName("TBODY")[0];
		if (tbl.hasChildNodes()) {
			tbl.removeChild(tbl.lastChild);     // 마지막 로우   //tbl.removeChild(tbl.firstChild);  // 첫번째 로우
		}
		rowcount--;
	}
}
//첨부파일 열 추가
</script>
<form action="" method="post">
	<fieldset>
		<legend>글 작성</legend>
		<div class="board-write">
			<div class="group">
				<label for="userName" class="title">작성자</label>
				<input type="text" name="name" id="userName" value="관리자" class="input" style="width:180px">
			</div>
			<div class="group">
				<label class="title">공개여부</label>
				<input type="radio" name="publicYN" id="publicY" value="Y" checked="checked" /><label for="publicY">공개글</label> &nbsp;
				<input type="radio" name="publicYN" id="publicN" value="N" /><label for="publicN">비공개글</label>
			</div>
			<div class="group">
				<label for="pass" class="title">비밀번호</label>
				<input type="password" name="pass" id="pass" class="input" style="width:180px;margin-right:10px;">
				<input type="checkbox" id="uselock" name="uselock"><label for="uselock">글잠금</label>
			</div>
			<div class="group">
				<label for="title" class="title">제목</label>
				<input type="text" name="title" id="title" class="input" style="width:80%;margin-right:10px;">
				<input name="is_notice" id="isNotice" type="checkbox" value="Y"><label for="isNotice">공지</label>
			</div>
			<div class="group">
				<a href="#boardContent" class="hide">내용작성 바로가기</a><!-- 클릭하면 텍스트에디터 내용작성으로 -->
				<label class="title">내용</label>
				<input type="radio" name="EditarYN" id="EditarY" value="Y" checked="checked" /><label for="EditarY">웹에디터로 내용 작성</label> &nbsp;
				<input type="radio" name="EditarYN" id="EditarN" value="N" /><label for="EditarN">텍스트에디터로 내용 작성</label>
			</div>
			<div class="group content" id="contentEditor">
				<textarea name="contentEditor" id="contentE" class="textarea" style="width:100%;height:360px;" title="내용"></textarea>
			</div>
			<div class="group content" id="contentArea" Style="display:none;">
				<textarea name="contentArea" id="contentA" class="textarea" style="width:100%;height:360px" title="내용"></textarea>
			</div>
			<div class="group">
				<label for="file" class="title">첨부파일</label>
				<table id="files_table" class="files_table">
					<tbody>
						<tr>
							<td><input name="upfiles[]" type="file" class="input" style="width: 400px;"> <a href="javascript:append();" class="btn-pack medium"><font color=blue>추가</font></a> <a href="javascript:remove();" class="btn-pack medium"><font color=red>삭제</font></a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="buttons">
			<div class="cen">
				<input type="submit" value="확인" class="btn-pack large">
				<a href="#" class="btn-pack large">취소</a>
			</div>
		</div>
	</fieldset>
</form>
<!-- 글쓰기 //-->

<br><br><br>

<!--// 뷰페이지 -->
<script type="text/javascript">
function openFileLayer(){
	var fileLayer = document.getElementById("fileLayer");
	if(fileLayer.style.display !='block') {
		fileLayer.style.display = 'block';
	}else{
		fileLayer.style.display = 'none';
	}
	return false
}
</script>
<div class="board-view">
	<div class="head">
		<h3 class="tit">제목클릭시 보여지는 상세페이지입니다. 제목입력란</h3>
		<div class="info">
			<span class="name"><strong>관리자</strong></span>
			<span class="date">2015-08-11 16:03:20</span>
			<span class="hit"><strong>조회수</strong> 23</span>
		</div>
		<div class="files">
			<a href="javascript:;" onclick="openFileLayer();">첨부파일<span class="num">(<strong>2</strong>)</span><img src="../images/bbs/file_down.gif" class="ico-down" alt="첨부파일 보기"></a>
			<div class="fileLayer" id="fileLayer">
				<a href="파일명.hwp" title='파일명.hwp'><img src="../images/bbs/file_ico.gif" alt="첨부파일"> 파일명.hwp</a>
				<a href="파일명.hwp" title='파일명2.hwp'><img src="../images/bbs/file_ico.gif" alt="첨부파일"> 파일명2.hwp</a>
				<a href="javascript:;" onclick="openFileLayer();" class="divClose"><img src="../images/bbs/file_close.gif" alt="닫기"></a>
			</div>
		</div>
	</div>
	<div class="body">
		내용이 나타납니다.<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	</div>
</div>

<div class="buttons">
	<div class="fr">
		<a href="#" class="btn-pack medium">목록</a>
		<a href="#" class="btn-pack medium">답변</a>
		<a href="#" class="btn-pack medium">삭제</a>
		<a href="#" class="btn-pack medium">수정</a>
	</div>
</div>

<div class="prev_next">
	<dl class="prev">
		<dt>이전글</dt>
		<dd><a href="#" title="이전글 게시물 제목이 나타납니다.">이전글 게시물 제목이 나타납니다.</a></dd>
	</dl>
	<dl class="next">
		<dt>다음글</dt>
		<dd><a href="#" title="이전글 게시물 제목이 나타납니다.">이전글 게시물 제목이 나타납니다.</a></dd>
	</dl>
</div>
<!-- 뷰페이지 //-->

<!--// 댓글-->
<div class="comment-area">
	<div class="comment-write">
		<form action="" method="post">
			<fieldset>
				<legend>댓글입력</legend>
				<div class="write">
					<textarea name="c_textarea" id="c_textarea" class="textarea" title="댓글입력"></textarea>
					<div class="btn"><input type="submit" value="댓글입력" class="btn-pack comment"></div>
				</div>
			</fieldset>
		</form>
	</div>
	<div class="comment-list">
		<ul>
			<li>
				<div class="info">
					<span class="name">관리자</span>
					<span class="date">2011.07.26 09.35.00</span>
				</div>
				<div class="txt">
					코멘트 테스트입니다.코멘트 테스트입니다.코멘트 테스트입니다.
				</div>
				<div class="controll">
					<a href="#">수정</a>|<a href="#">삭제</a>
				</div>
			</li>
			<li>
				<div class="info">
					<span class="name">관리자</span>
					<span class="date">2011.07.26 09.35.00</span>
				</div>
				<div class="txt">
					코멘트 테스트입니다.코멘트 테스트입니다.코멘트 테스트입니다.
				</div>
				<div class="controll">
					<a href="#">수정</a>|<a href="#">삭제</a>
				</div>
			</li>
		</ul>
	</div>
	<div class="paginate">
		<a class="direction first" href="#"><span>처음페이지</span></a><a class="direction prev" href="#"><span>이전페이지</span></a><a href="#">1</a><strong>2</strong><a href="#">3</a><a href="#">4</a><a class="direction next" href="#"><span>다음페이지</span></a><a class="direction last" href="#"><span>마지막페이지</span></a>
	</div>
</div>
<!-- 댓글 //-->

<br>
<br>
<br>

<!--// 비밀번호 입력 -->
<div class="board-password">
	<form action="">
		<dl>
			<dt>최초 글 등록시에 입력하셨던 비밀번호를 입력하세요.</dt>
			<dd>
				<label for="pass">비밀번호</label>
				<input type="password" name="pass" id="pass" class="input" style="width:160px;">
				<input type="submit" value="확인" class="btn-pack medium">
			</dd>
		</dl>
	</form>
</div>
<!-- 비밀번호 입력// -->