java-school logo

상세보기

list.html 파일을 '다른 이름으로 저장하기' 메뉴를 이용하여 view.html 파일을 생성한다.
view.html 문서를 열고 #content 사이 <h1>Eclipse 설치</h1> 아래 다음 코드를 붙여넣는다.
기존 코드는 그대로 두어 목록을 보여주는 코드가 상세보기 화면 아래에 보이도록 한다.

<table class="bbs-table">
<tr>
    <th style="width: 37px;text-align: left;vertical-align: top;">TITLE</th>
    <th style="text-align: left;color: #555;">무궁화꽃이피었습니다</th>
</tr>
</table>
<div id="detail">
    <span id="date-writer-hit">2014 10-09 17:50:30 by 홍길동 hit 1330</span>
    <p>
    무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
    무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
    </p>
</div>
<!--  댓글 반복 시작 -->
<div class="comments">
    <span class="writer">xman</span>
    <span class="date">2011.12.11 12:14:32</span>
    <span class="modify-del">
        <a href="javascript:modifyCommentToggle('5')">수정</a>
         | <a href="javascript:deleteComment('5')">삭제</a>
    </span>
    <p id="comment5">무궁화꽃이피었습니다</p>
    <form id="modifyCommentForm5" class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none;">
    <p>
        <input type="hidden" name="commentNo" value="5" />
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="articleNo" value="12" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="무궁화꽃" />
    </p>
    <div class="fr">
            <a href="javascript:document.forms.modifyCommentForm5.submit()">수정하기</a>
            | <a href="javascript:modifyCommentToggle('5')">취소</a>
    </div>
    <div>
        <textarea class="modify-comment-ta" name="memo" rows="7" cols="50">무궁화꽃이 피었습니다.</textarea>
    </div>
    </form>
</div>
<div class="comments">
    <span class="writer">xman</span>
    <span class="date">2011.12.11 12:14:32</span>
    <span class="modify-del">
        <a href="javascript:modifyCommentToggle('4')">수정</a>
         | <a href="javascript:deleteComment('4')">삭제</a>
    </span>
    <p id="comment4">무궁화꽃이피었습니다</p>
    <form id="modifyCommentForm4" class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none;">
    <p>
        <input type="hidden" name="commentNo" value="4" />
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="articleNo" value="12" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="무궁화꽃" />
    </p>
    <div class="fr">
        <a href="javascript:document.forms.modifyCommentForm4.submit()">수정하기</a>
        | <a href="javascript:modifyCommentToggle('4')">취소</a>
    </div>
    <div>
        <textarea class="modify-comment-ta" name="memo" rows="7" cols="50">무궁화꽃이 피었습니다.</textarea>
    </div>
    </form>
</div>
<!--  댓글 반복 끝 -->
<form id="addCommentForm" action="addComment_proc.jsp" method="post">
    <p style="margin: 0; padding: 0;">
        <input type="hidden" name="articleNo" value="5"/>
        <input type="hidden" name="boardCd" value="free" />
        <input type="hidden" name="curPage" value="1" />
        <input type="hidden" name="searchWord" value="무궁화꽃" />
    </p>
    <div id="addComment">
        <textarea name="memo" rows="7" cols="50"></textarea>
    </div>
    <div style="text-align: right;">
        <input type="submit" value="댓글 남기기" />
    </div>
</form>
<div id="next-prev">
    <p>다음 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
    <p>이전 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
</div>
<div id="view-menu">
    <div class="fl">
        <input type="button" value="수정" />
        <input type="button" value="삭제" />
    </div>
    <div class="fr">
        <input type="button" value="다음 글" />
        <input type="button" value="이전 글" />
        <input type="button" value="목록" />
        <input type="button" value="새 글쓰기" />
    </div>
</div>

댓글이 반복되는 부분에서 comment5와 modifyCommentForm5에서 5는 댓글의 고유번호이다. 이 번호는 프로그램적으로 부여되어야 한다.

bbs-view-01

댓글 수정을 위한 자바 스크립트 토글 함수

아래 그림의 수정을 클릭하면 동작하는 자바스크립트 함수를 생성하려 한다.

댓글 수정 링크

수정을 클릭하면 textarea를 포함하는 수정 폼이 나타나야 한다. (이 수정 폼은 디폴트로 숨겨져 있다) 아래 자바스크립트 코드를 </head> 바로 위에 복사한다.

<script type="text/javascript">
function modifyCommentToggle(articleNo) {
    var p_id = "comment" + articleNo;
    var p = document.getElementById(p_id);
    
    var form_id = "modifyCommentForm" + articleNo;
    var form = document.getElementById(form_id);
    
    var p_display;
    var form_display;
    
    if (p.style.display) {
            p_display = '';
            form_display = 'none';
    } else {
            p_display = 'none';
            form_display = '';
    }
    p.style.display = p_display;
    form.style.display = form_display;
}
</script>

댓글의 수정과 취소를 클릭하여 자바스크립트 함수가 제대로 동작하는지 확인한다.

게시판 상세보기 댓글 수정 토글 자바스크립트 함수 작성하기

위에서 강조된 수정과 취소 링크는 같은 동작을 한다. 수정 폼이 보이면 안 보이게, 안 보이면 보이게 한다. 댓글 본문을 담는 p 엘리먼트는 정확히 이와 반대로 동작한다. 이를 토글(toggle)이라 한다.

날짜, 작성자, 조회 수 스타일링

[HTML]
<span id="date-writer-hit>2014 10-09 17:50:30 by 홍길동 hit 1330</span>
[CSS]
#date-writer-hit {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: #555;
	text-align: right;
}

게시판 상세보기 작성자, 조회 수 디자인 결과

게시글 본문 스타일링

[HTML]
<div id="detail">
	<span id="date-writer-hit">2014 10-09 17:50:30 by 홍길동 hit 1330</span>
	<p>
	무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
	무궁화꽃이피었습니다무궁화꽃이피었습니다무궁화꽃이피었습니다<br />
	</p>
[CSS]
#detail > p {
	margin: 0 0 15px 0;
	padding: 0;
	color: #333;
}

댓글 작성자, 댓글 작성일, 수정|삭제 링크, 댓글 본문 스타일링

게시판 상세보기 댓글 디자인 전

[HTML]
<div class="comments">
	<span class="writer">xman</span>
	<span class="date">2011.12.11 12:14:32</span>
	<span class="modify-del">
		<a href="javascript:modifyCommentToggle('5')">수정</a>
		| <a href="javascript:deleteComment('5')">삭제</a>
	</span>
	<p id="comment5">무궁화꽃이피었습니다</p>
	<form id="modifyCommentForm5" class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none;">
		<p>
			<input type="hidden" name="commentNo" value="5" />
			<input type="hidden" name="boardCd" value="free" />
			<input type="hidden" name="articleNo" value="12" />
			<input type="hidden" name="curPage" value="1" />
			<input type="hidden" name="searchWord" value="무궁화꽃" />
		</p>
		<div class="fr">
			<a href="javascript:document.forms.modifyCommentForm5.submit()">수정하기</a>
			| <a href="javascript:modifyCommentToggle('5')">취소</a>
		</div>
		<div>
			<textarea class="modify-comment-ta" name="memo" rows="7" cols="50">무궁화꽃이피었습니다.</textarea>
		</div>
	</form>
</div>
[CSS]
/* 댓글과 댓글을 테두리로 구분 */
.comments {
	border-top: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
}
/* 댓글 작성자 ID */
.comments > span.writer {
	display: block;
	float: left;
	margin: 3px;
	padding: 0;
	font-size: 12px;
	font-weight: bold;
	color: #555;
}
/* 댓글 작성일 */
.comments > span.date {
	display: block;
	float: left;
	margin: 3px;
	padding: 0;
	font-size: 12px;
	color: #555;
}
/* 댓글 수정|삭제 */
.comments > span.modify-del {
	display: block;
	float: right;
	margin: 3px;
	padding: 0;
	font-size: 12px;
	color: #555;
}
/* 댓글 수정|삭제 링크 */
.comments a {
	color: #555;
	text-decoration: none;
	font-size: 11px;
}
.comments a:hover {
	color: #555;
	text-decoration: underline;
}
/* 댓글 내용 */
.comments > p {
	clear: both;
	margin: 0;
	padding: 0 3px 3px 3px;
	color: #555;
	font-size: 11px;
}

게시판 상세보기 댓글 디자인 결과

댓글 수정 폼 스타일링

게시판 상세보기 댓글 수정 폼 디자인 전

[HTML]
<div class="comments">
	<span class="writer">xman</span>
	<span class="date">2011.12.11 12:14:32</span>
	<span class="modify-del">
		<a href="javascript:modifyCommentToggle('5')">수정</a>
		| <a href="javascript:deleteComment('5')">삭제</a>
	</span>
	<p id="comment5">무궁화꽃이피었습니다</p>
	<form id="modifyCommentForm5" class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none;">
	<p>
		<input type="hidden" name="commentNo" value="5" />
		<input type="hidden" name="boardCd" value="free" />
		<input type="hidden" name="articleNo" value="12" />
		<input type="hidden" name="curPage" value="1" />
		<input type="hidden" name="searchWord" value="무궁화꽃" />
	</p>
	<div class="fr">
		<a href="javascript:document.forms.modifyCommentForm5.submit()">수정하기</a>
		| <a href="javascript:modifyCommentToggle('5')">취소</a>
	</div>
	<div>
		<textarea class="modify-comment-ta" name="memo" rows="7" cols="50">무궁화꽃이피었습니다.</textarea>
	</div>
	</form>
    
</div>
[CSS]
.modify-comment {
	clear: both; 
	padding: 0.22em 2.22em 0.22em 3.22em; 
}
.modify-comment-ta {
	border: 1px solid silver;
	padding: 3px;
	width: 99%;
	color:#555;
	background-color: #eee;
	font-size: 11px; 
}

게시판 상세보기 댓글 수정 폼 디자인 결과

댓글 쓰기 폼 스타일링

게시판 상세보기 댓글 쓰기 폼 디자인 전

[HTML]
<form id="addCommentForm" action="addComment_proc.jsp" method="post">
	<p style="margin: 0; padding: 0;">
		<input type="hidden" name="articleNo" value="5"/>
		<input type="hidden" name="boardCd" value="free" />
		<input type="hidden" name="curPage" value="1" />
		<input type="hidden" name="searchWord" value="무궁화꽃" />
	</p>
	<div id="addComment">
		<textarea name="memo" rows="7" cols="50"></textarea>
	</div>
	<div style="text-align: right;">
		<input type="submit" value="댓글 남기기" />
	</div>
</form>
[CSS]
#addComment {
	margin-bottom: 5px;
	padding: 0.22em;
	border: 1px solid #eee;
	background-color: #fafbf7;
}
#addComment textarea {
	width: 99%;
	padding: 3px;
	border: 0;
	color: #555;    
}

게시판 상세보기 댓글 쓰기 폼 디자인 결과

다음 글, 이전 글 스타일링

게시판 상세보기 다음 글 이전 글 디자인 전

[HTML]
<div id="next-prev">
	<p>다음 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
	<p>이전 글 : <a href="#">무궁화꽃이 피었습니다.</a></p>
</div>
[CSS]
#next-prev {
	margin: 7px 0;
	border-top: 1px solid #e1e1e1;
}
#next-prev > p {
	margin: 0;
	padding: 5px;
	border-bottom: 1px solid #e1e1e1;
	font-size: 12px;
	color: #333;
}
#next-prev > p > a {
	color: #333;
	text-decoration: none;
}
#next-prev > p > a:hover {
	color: #333;
	text-decoration: underline;
}

게시판 상세보기 다음 글 이전 글 디자인 결과

수정, 삭제, 다음 글, 이전 글, 목록, 새 글쓰기 버튼 위치 조정

게시판 상세보기 수정*삭제*다음 글*이전 글*목록*새 글쓰기 버튼 디자인 전

[HTML]
<div id="view-menu">
	<div class="fl">
		<input type="button" value="수정" />
		<input type="button" value="삭제" />
	</div>
	<div class="fr">
		<input type="button" value="다음 글" />
		<input type="button" value="이전 글" />
		<input type="button" value="목록" />
		<input type="button" value="새 글쓰기" />
	</div>
</div>
[CSS]
#view-menu {
    height: 22px;
    margin-bottom: 47px;
}
.fl {
    float: left;
}
.fr {
    float: right;
}

게시판 상세보기 수정*삭제*다음 글*이전 글*목록*새 글쓰기 버튼 디자인 결과

참고