java-school logo

글쓰기, 회원가입

새 글쓰기 폼 디자인

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

<!-- 본문 시작 -->
<div id="url-navi">Eclipse &gt; Eclipse Tutorial</div>
<h1>Eclipse 설치</h1>
<h2>글쓰기</h2>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="boardCd" value="free" />
<table id="write-form">
<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 파일에 다음을 추가한다.

#content > h2 {
	margin: 9px 0 0 0;
	padding: 0;
	font-size: 13px;
	border-bottom: 1px solid #ebebeb;
}
#write-form td {
	border: none;
}
#write-form textarea {
	width: 99%;
}

게시판 글쓰기 디자인 결과

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

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

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

/*** Just for Looks ***/를 모두 지운다.
CSS 파일에 다음을 추가한다.

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

회원가입 폼 디자인

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

<div id="url-navi">회원</div>
<h1>회원 가입</h1>
<form id="signUpForm" action="signUp_proc.jsp" method="post">
<table>
<tr>
	<td style="width: 200px;">이름(Full Name)</td>
	<td style="width: 390px;"><input type="text" name="name" /></td>
</tr>
<tr>
	<td>비밀번호(Password)</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>비밀번호 확인(Confirm)</td>
	<td><input type="password" name="confirm" /></td>
</tr>
<tr>
	<td>Email</td>
	<td><input type="text" name="email" /></td>
</tr>
<tr>
	<td>이동전화(Mobile)</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 프로젝트'는 여기서 만든 최종 디자인을 가지고 진행한다.