Last Modified : 2011.12.13

글쓰기

아래를 복사하여 write_form.html 이란 파일명으로 HTML문서를 만든다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="CSS 포지셔닝,CSS Layout,Negative Margin,3 Column" />
<meta name="Description" content="CSS 포지셔닝을 실습합니다." />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<title>CSS layout 실습</title>
<script type="text/javascript">
//<![CDATA[
//]]>					
</script>           
</head>
<body>

<div id="wrap">

	<div id="header">
		<h1><a href="#"><img src="images/ci.gif" alt="java-school logo" /></a></h1>
	</div>

	<div id="main-menu">
		<ul id="nav">
			<li><a href="#">Java</a></li>
			<li><a href="#">JDBC</a></li>
			<li><a href="#">JSP</a></li>
			<li><a href="#">Eclipse</a></li>
			<li><a href="#">Struts2</a></li>
			<li><a href="#">Ajax</a></li>
			<li><a href="#">Android</a></li>
		</ul>
	</div>

	<div id="container">
		<div id="content">
			<div id="url-navi">Eclipse > Eclipse Tutorial</div>
			<h1>Eclipse 설치</h1>

<!--  새글쓰기 start -->
<div id="bbs">
<h2>글쓰기</h2>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<p style="margin: 0;padding: 0;">
<input type="hidden" name="bcd" value="free" />
<input type="hidden" name="cpage" value="1" />
<input type="hidden" name="field1" value="title" />
<input type="hidden" name="field2" value="content" />
<input type="hidden" name="search" value="무궁화" />
</p>
<table id="write-form">
<tr>
	<td>제목</td>
	<td><input type="text" name="title" size="70" /></td>
</tr>
<tr>
	<td colspan="2">
		<textarea name="content" cols="50" rows="17"></textarea>
	</td>
</tr>
<tr>
	<td>파일첨부</td>
	<td><input type="file" name="attach" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
		<input type="button" value="전송" />
		<input type="button" value="취소" />
		<input type="button" value="목록" />
</div>
</form>
</div>
<!--  새글쓰기 end -->

		</div>
	</div>
	
	<div id="sidebar">
		<h1>Eclipse</h1>
		<ul>
			<li><a href="#">Eclipse Tutorial</a>
				<ul>
					<li><a href="#">Eclipse 설치</a></li>
					<li><a href="#">WTP 설치</a></li>
				</ul>
			</li>
		</ul>
	</div>
	
	<div id="extra">extra</div>

	<div id="footer">
	
		<ul>
			<li><a href="#">이용약관</a></li>
			<li><a href="#">개인정보보호정책</a></li>
			<li><a href="#">이메일무단수집거부</a></li>
			<li id="company-info">전화 : 02-123-5678, FAX : 02-123-5678<br />
			people@ggmail.org<br />
			Copyright java-school.net All Rights Reserved.</li>
			<li><a href="#">찾아오시는 길</a></li>
		</ul>
	
	</div>

</div>

</body>
</html>

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%;
}
/*** 글쓰기 화면 디자인 ***/

예제보기 1

전송,취소,목록 버튼이 있는 부분은 테이블이 아닌 div 로 처리함을 주목한다.
전송,취소,목록까지 테이블의 셀안에 있으면 IE에서 다르게 보인다.
(IE9에서 중앙 양옆의 경계선이 #footer에서 조금 떨어진다.)
이유는 테이블의 디폴트 마진때문이라 생각된다.
새글쓰기 화면은 수정 화면으로도 사용할 것이다.

extra 디자인

이곳은 상상력을 발휘하는 곳이다.
구글이나 페이스북의 다양한 기능을 활용하는 것도 좋겠다.
여기서는 단순히 이미지에 자주 가는 사이트 링크를 거는 것으로 대신한다.
링크이미지를 다운로드하여 압축을 풀고 images 폴더에 그림이 저장한다. 링크 이미지 다운로드
이미지의 넓이는 모두 203px 로 테두리(border) 두께까지 고려했다.
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://www.twitter.com"><img src="images/twitter.png" alt="twitter.com" /></a>
	<a href="http://www.facebook.com"><img src="images/facebook.png" alt="facebook.com" /></a>
	<a href="http://www.gmail.com"><img src="images/gmail.png" alt="gmail.com" /></a>
	<a href="http://www.java-school.net"><img src="images/java-school.png" alt="java-school.net" /></a>
</div>

CSS파일을 열고 다음을 추가한다.


#extra a {
	display: block;
	margin-bottom: 20px;
	border: 1px solid #DAEAAA;
}

#extra a:hover {
	border: 1px solid red;
}

extra 의 높이가 content 보다 크기 때문에 content 에 적용된 테두리가 footer 까지 내려오지 않으므로
content 에 style 속성을 사용하여 height 값을 800px 로 설정한다.
아래 참고문서에서 이 문제에 대한 해결책이 나와 있다.


<div id="container">
		<div id="content" style="height: 800px;">
		..
		.

예제보기 2

회원 가입 페이지 디자인

회원 가입 양식 페이지를 디자인한다.
아래 코드를 복사하여 #content 안에 복사하여 signUpForm.html 이름으로 새로운 HTML 문서를 만든다.
signUpForm.html 파일을 최상위 디렉토리에 저장한다.


<div id="content" style="height: 800px;">
	<div id="url-navi">Eclipse > Eclipse Tutorial</div>
	<h1>회원가입</h1>
	<!--  회원가입 양식 start -->
	<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" style="width: 99%" /></td>
	</tr>
	<tr>
		<td>비밀번호(Password)</td>
		<td><input type="password" name="password"style="width: 99%" /></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" style="width: 99%" /></td>
	</tr>
	<tr>
		<td>Email</td>
		<td><input type="text" name="email" style="width: 99%" /></td>
	</tr>
	<tr>
		<td>손전화(Mobile)</td>
		<td><input type="text" name="mobile" style="width: 99%" /></td>
	</tr>
	</table>
	<div style="text-align: center;padding-bottom: 15px;">
		<input type="button" value="확인" />
	</div>
	</form>
	<!--  회원가입양식 end -->
</div>

CSS파일에 새로운 스타일을 추가하지 않는다.
예제보기 3

우리는 프로그램 구현 직전 단계까지 진행했다.
화면이 마련되었으면 미니 프로젝트는 충분히 할 수 있다.
JSP에 대해서 생소하다면 먼저 JSP 과정을 학습한다.
그 다음 JSP Project 과정을 학습한다.
JSP Project 에서 우리가 지금까지 작업한 디자인을 가지고 프로젝트를 진행 할 것이다.

참고문서

http://www.alistapart.com/articles/holygrail/