이번 시간에는 jsp와 java, html ,javascript를 활용하여 홈페이지를 만드는 시간을
가져보겠습니다.
한번에 전체 소스를 올리는 것은 당사자인 저도 정리가 안될뿐더러
파트 별로 나눠서 올리는 것이 이해가 될 것 같아
부분 부분 모듈 별로 올려봅니다.
이번 시간에는 홈페이지 메인 화면의 구조에 관한 소스 코드와
설명을 올리겠습니다.
결과 화면은 아래와 같습니다. UI는 솔직히 아직 다듬은 상태가 아니라 별로입니다
막상 봤을 때는 단순해 보이지만
총 세개의 파일로 구성되어 있습니다.
1. 화면의 상단을 보여주는 top.jsp
2. 화면의 하단을 보여주는 foot.jsp
3. 화면의 중간을 보여주는 index.jsp
자 그럼 먼저 top.jsp 부터 소스 코드를 공개하겠습니다
=========================================================
//top.jsp - 화면 상단
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- top.jsp : top 페이지는 모든 페이지에서 include 하므로 절대경로로 링크 거는 것이 좋다.-->
<%
//컨텍스트명을 얻어온다.
String myctx=request.getContextPath();
//=> "MyWeb"
%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::HomePage::</title>
<link rel="stylesheet" type="text/css" href="<%=myctx%>/css/layout.css">
<link rel="stylesheet" type="text/css" href="<%=myctx%>/css/calendar.css">
<script src="./js/calendar.js"></script>
</head>
<body onload="showToday()">
<div id="wrap">
<!-- 헤더영역--------------------------- -->
<header>
<!--헤더: 문서의 로고 이미지,검색폼,목차
등이 들어감-->
<a href="http://www.facebook.com"><img src="<%=myctx%>/images/logo2.PNG"></a>
</header>
<div class="clear"></div>
<!-- nav:네비게이션바-------------- -->
<nav>
<ul>
<li><a href="<%=myctx%>/index.jsp">HOME</a></li>
<li><a href="<%=myctx%>/member/memberJoin.jsp">JOIN</a></li>
<li><a href="<%=myctx%>/login/login.jsp">LOGIN</a></li>
<li><a href="<%=myctx%>/board/board.jsp">BOARD</a></li>
</ul>
</nav>
</div>
<div class="clear"></div>
<!--article:주로 컨텐츠가 들어감 -->
<article>
=========================================================
//foot.jsp - 화면 하단
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- foot.jsp -->
</article>
<!-- aside: 사이드 메뉴가 들어감 -->
<% String myctx=request.getContextPath(); %>
<aside>
<nav>
<!-- 로그인 페이지 포함(실행결과가 아닌 소스를 포함시킨다)------ -->
<%@ include file="/login/login.jsp" %>
<!-- ------------------------------------------ -->
<ul>
<li><a href="<%=myctx%>/member/memberList.jsp">MemberList</a></li>
<li><a href="<%=myctx%>/beans/input.jsp">Beans Scope1</a></li>
<li><a href="<%=myctx%>/beans/input2.jsp">Beans Scope2</a></li>
<li><a href="<%=myctx%>/login/sessionTest.jsp">세션 테스트</a></li>
<li><a href="<%=myctx%>/login/memberTest.jsp">회원 인증 페이지</a></li>
<li><a href="<%=myctx%>/cookie/cookieTest.jsp"></a>쿠키 테스트</li>
</ul>
</nav>
<div id="cal"></div>
</aside>
<div class="clear"></div>
<!-- footer:하단 목록,Copyright -->
<footer>
푸터:Copyright
</footer>
=========================================================
//index.jsp - 화면 중간
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp" />
<H1>Index Page</H1>
<jsp:include page="/foot.jsp"/>
=========================================================
일단 기본 포맷은 갖췄으나 아직 구성해야 할게 많이 남아있습니다.
그것은 다음 포스팅에서 계속해서 올리겠습니다.
댓글 없음:
댓글 쓰기