게시판 글쓰기와 회원가입 스타일 지정

게시판 글쓰기 페이지

view.html 파일을 에디터에서 '다른 이름으로 저장하기' 메뉴를 사용하여 write_form.html 파일을 생성한다.
#content 엘리먼트의 기존 내용을 모두 삭제하고 대신 다음 코드를 붙여넣는다.

<!-- 본문 시작 -->
<div id="content-categories">자유 게시판</div>
<h3>새 글쓰기</h3>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="boardCd" value="chat" />
<table id="write-form" class="bbs-table">
<tr>
	<td>제목</td>
	<td><input type="text" name="title" style="width: 90%;" /></td>
</tr>
<tr>
	<td colspan="2">
		<textarea name="content" rows="17" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td>첨부 파일</td>
	<td><input type="file" name="attachFile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
	<input type="submit" value="전송" />
	<input type="button" value="취소" />
	<input type="button" value="목록" />
</div>
</form>
<!-- 본문 끝 -->

[CSS]

#write-form td {
	border: none;
}
#write-form textarea {
	width: 99%;
}

[결과 화면]

#extra 디자인

#extra 부분은 웹사이트 기획자가 상상력을 발휘하는 곳이다.
다음 이미지를 내려받아 images 폴더에 저장한다.

write_from.html의 #extra에 다음 코드를 추가한다.

<div id="extra">
	<a href="http://www.youtube.com"><img src="images/youtube.png" alt="youtube" /></a>
	<a href="http://gmail.com"><img src="images/gmail.gif" alt="gmail" /></a>
	<a href="http://drive.google.com"><img src="images/google-drive.png" alt="google drive" /></a>
	<a href="https://cloud.google.com/"><img src="images/gcp-logo.png" alt="google cloud" /></a>
</div>

/*** Just for Looks ***/를 모두 지운다.

[CSS]

#extra img {
	width: 203px;
}
#extra a {
	display: block;
	border: 1px solid #DAEAAA;
	margin-bottom: 7px;
}
#extra a:hover {
	opacity: 0.7;
}

[결과 화면]

회원가입 페이지

write_form.html 파일을 에디터에서 '다른 이름으로 저장하기' 메뉴를 이용하여 signUp.html 파일을 만든다.
#content의 내용을 다음 코드로 바꾼다.

<div id="content-categories">회원</div>
<h3>회원 가입</h3>
<form id="signUpForm" action="signUp_proc.jsp" method="post">
<table>
<tr>
	<td style="width: 200px;">이름</td>
	<td style="width: 390px;"><input type="text" name="name" /></td>
</tr>
<tr>
	<td>비밀번호</td>
	<td><input type="password" name="passwd" /></td>
</tr>
<tr>
	<td colspan="2" style="text-align: center;font-weight: bold;">
	Email이 아이디로 쓰이므로 비밀번호는 Email 계정 비밀번호와 같게 하지 마세요.
	</td>
</tr>
<tr>
	<td>확인</td>
	<td><input type="password" name="confirm" /></td>
</tr>
<tr>
	<td>Email</td>
	<td><input type="text" name="email" /></td>
</tr>
<tr>
	<td>이동전화</td>
	<td><input type="text" name="mobile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
	<input type="submit" value="전송" />
</div>
</form>

[결과 화면]

지금까지 게시판 디자인을 작업했다.
다음 장 'JSP 프로젝트'는 여기서 만든 최종 디자인을 가지고 진행한다.

최종 소스