JSP를 활용해서 웹사이트 만들기

java(2)↗

JSP를 활용해서 웹사이트 만들기

개미Coder

|2024. 6. 5. 09:43

HTML이 아닌 JSP로 만들기

- HTML과 구성이 비슷하다. (서버기능을 가지는 것이 특징이다)

- 서버기능을 무시하고 페이지 기능은 HTML과 순수하게 똑같다.

JSP를 사용하여 레이아웃 만들기

이제는 하나의 조립형태로 만들것이다 header를 따로 만들어서 제목 항목에 넣어줄 것이다.

(HTML에서는 안되고 JSP의 인크루드 기능을 활용하는 것이다)

1. header 파일을 main JSP 파일에 넣어줄 것이다.

2. header 파일에서 적용한 h1이 제목으로 적용된다.

3. title을 header JSP 파일에서 id값으로 줬는데도, include한 상태이면 css에서 title 값을 변경해주면 변경이 된다.

- css가 main에 지정해도 한공간에서 사용 할 수 있다. 상속되어 있기 때문이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>

<body>
	<img id="img-logo" alt="로고" src="image/logo.JPG";>
	<h1 id="title">::::BarkJunghwan Online Free Server::::</h1>
	<!-- main menu -->
	<%@include file ="../menu/main-menu.jsp" %>
</body>

</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>


<body>

	<ul id="main-menu">
		<li><a href="#">회사소개</a></li>
		<li><a href="#">상품소개</a></li>
		<li><a href="#">고객센터</a></li>
	</ul>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="footer-content">
	(주) Blizzard Entertainment&nbsp;&nbsp;&nbsp;<a onclick="alert('개인정보처리정책');">개인보호정책</a><br>
	대표자 : 박졍환<br>
	전 &nbsp;화 : 02-1234-1234<br>
	주 &nbsp;소 : 서울시 관악구 남부순환대로 111
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSTL Core Library 사용 설정 -->
<!-- 제어문: if/forEach/Choose/set/.. -->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-menu.css">
<link rel="stylesheet" href="css/sub-menu.css">
</head>

<body>
	<div id="main-box">
		<div id="header">
			<!-- header.jsp include -->
			<%@include file="header/header.jsp" %>
		</div>
		<div id="aside">
			<%@include file="menu/submenu-company.jsp" %>
		</div>
		<div id="content">
			<!-- main-company.jsp 처음 접속시에 비어있음
				 main-company.jsp?menu=introduce
				 main-company.jsp?menu=history
				 main-company.jsp?menu=location
				 
				 menu <- parameter
			 -->
			<!-- menu=="introduce" -->
			<c:if test="${ (empty param.menu) or param.menu == 'introduce' }">
				<%@include file="content/company/introduce.jsp" %>
			</c:if>
			
			<!-- menu=="history" -->
			<c:if test="${ (empty param.menu) or param.menu == 'history' }">
				<%@include file="content/company/history.jsp" %>
			</c:if>
			
			<!-- menu=="location" -->
			<c:if test="${ (empty param.menu) or param.menu == 'location' }">
				<%@include file="content/company/location.jsp" %>
			</c:if>
			
		</div>
		<div id="footer">
			<%@include file="footer/footer.jsp" %>
		</div>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-menu.css">
<link rel="stylesheet" href="css/sub-menu.css">
</head>

<body>
	<div id="main-box">
		<div id="header">
			<!-- header.jsp include -->
			<%@include file="header/header.jsp" %>
		</div>
		<div id="aside">
			<%@include file="menu/submenu-product.jsp" %>
			
		</div>
		<div id="content">
						<!-- menu=="introduce" -->
			<c:if test="${ (empty param.menu) or param.menu == 'introduce' }">
				<%@include file="content/product/introduce.jsp" %>
			</c:if>
			
			<!-- menu=="history" -->
			<c:if test="${ (empty param.menu) or param.menu == 'price' }">
				<%@include file="content/product/price.jsp" %>
			</c:if>
			
			<!-- menu=="location" -->
			<c:if test="${ (empty param.menu) or param.menu == 'QnA' }">
				<%@include file="content/product/QnA.jsp" %>
			</c:if>
		</div>
		<div id="footer">
			<%@include file="footer/footer.jsp" %>
		</div>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-menu.css">
<link rel="stylesheet" href="css/sub-menu.css">
</head>

<body>
	<div id="main-box">
		<div id="header">
			<!-- header.jsp include -->
			<%@include file="header/header.jsp" %>
		</div>
		<div id="aside">
			<%@include file="menu/submenu-customer.jsp" %>
		</div>
		<div id="content">
			<%-- <%@include file="content/content-customer.jsp" %> --%>
			<c:if test="${ (empty param.menu) or param.menu == 'center' }">
				<%@include file="content/customer/center.jsp" %>
			</c:if>
			
			<!-- menu=="history" -->
			<c:if test="${ (empty param.menu) or param.menu == 'QnA' }">
				<%@include file="content/customer/QnA.jsp" %>
			</c:if>
			
			<!-- menu=="location" -->
			<c:if test="${ (empty param.menu) or param.menu == 'review' }">
				<%@include file="content/customer/review.jsp" %>
			</c:if>
		</div>
		<div id="footer">
			<%@include file="footer/footer.jsp" %>
		</div>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<ul class="submenu">
		<li><a href="main-company.jsp?menu=introduce">인사말</a></li>
		<li><a href="main-company.jsp?menu=history">회사연혁</a></li>
		<li><a href="main-company.jsp?menu=location">오시는길</a></li>
	</ul>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<ul class="submenu">
		<li><a href="main-customer.jsp?menu=center">고객센터</a></li>
		<li><a href="main-customer.jsp?menu=QnA">Q&A</a></li>
		<li><a href="main-customer.jsp?menu=review">고객리뷰</a></li>
	</ul>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<ul class="submenu">
		<li><a href="main-product.jsp?menu=introduce">상품소개</a></li>
		<li><a href="main-product.jsp?menu=price">상품가격</a></li>
		<li><a href="main-product.jsp?menu=QnA">상품문의</a></li>
	</ul>
</body>
</html>

CSS

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

#main-box {
	width: 800px;
	height: 600px;
	
	margin: auto; /* 중간에 자동 정렬 */
	
	/* background: #cccccc; */
}

#header {
	width: 100%;
	height: 100px;
	
	/* background-color: #ffcccc; */
}

#title {
	text-align: center;
	margin-top: 10px;
	
	font-size: 28px;
	font-weight: bold;
	
	color: #0000a0;
	text-shadow: 1px 1px 1px black;
}

#aside {
	width: 30%;
	height: 400px;
	
	float: left;
	
	box-sizing: border-box;
	border-left: 1px solid blue;
}

#content {
	width: 70%;
	min-height: 400px;
	height: auto; /* 내용에 따라 자동 증가 */
	
	float: left;
	box-sizing: border-box;
	border: 1px solid blue;
}

#footer {
	width: 100%;
	height: 100px;
	
	background: #0000a0;
	
	clear: both;
}

#footer-content {
	color: white;
	padding: 5px;
	padding-left: 20px;
	
	font-size: 16px;
}

@charset "UTF-8";

#main-menu {
	margin-top : 20px;
	list-style: none;
	background: #0000a0;
}

#main-menu > li {
	display: inline-block;
}

#main-menu > li > a {
	display: block;
	width: 120px;
	
	text-decoration: none;
	text-align: center;
	
	font-size: 22px;
	font-weight: bold;
	
	margin-top: 15px;
	margin-left: 100px;
	
	color: white;
}

#main-menu > li > a:hover {
	color: yellow;
}

@charset "UTF-8";

.submenu {
	list-style: none;
	padding: 30px;
}

.submenu > li > a {
	display: block;
	width: 100px;
	
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	color: rgba(0,100,200,0.7);
	
	margin-top: 50px;
	margin-left: 10px;
}

.submenu > li > a:hover {
	color: rgba(0,100,200,1.0);
}

JSP(Java Server Page)

1. EL(Expression Language)
   표현언어
   ${ 값(변수/상수/수식) }

2. JSTL(JSP Standard Tag Library)
   1) 기존설치된 Tomcat내에 존재 -> lib
   C:\apache-tomcat-10.1.24\webapps\examples\WEB-INF\lib <= 2개파일 복사
   C:\apache-tomcat-10.1.24\lib <= 붙여넣기

   <c:forEach var="n" items="${ 배열/컬렉션 }">
   </c:forEach>

   <c:if test="${ 조건 }">
   명령
   </c:if>
   for(int n : list)

<!-- JSTL Core Library 사용 설정 -->
<!-- 제어문: if/forEach/Choose/set/.. -->
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

저작자표시

'java(2)↗' 카테고리의 다른 글

[회원가입] form Servlet 전달 (0)	2024.06.17
java 알고리즘 보물창고 (0)	2024.05.29
java Stream (0)	2024.05.29
java 2차원배열 및 알고리즘 (0)	2024.05.14
java 요약노트(2) (0)	2024.05.13