Light Purple Pointer

 

 

 

 

 

 

 

 

 

 

welcome.jsp 파일 생성

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<!-- 자바선언문-->
<%!String greeting ="Book Market mall";
	String tagline ="Welcome to Book Market!";%>
	
	<h1><%=greeting %></h1>
	<h1><%=tagline %></h1>
</body>
</html>

 

 

 

 

부트스트랩 적용

4.6버전

 

https://getbootstrap.com/docs/4.6/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

이클립스 설정 변경

-> vscode에서 html 수정하면 이클립스에서 변경된 자료 바로 반영할 수 있도록 

 

vscode에서 부트스트랩 추가

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    />
    <title>Welcome</title>
  </head>
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="./welcome.jsp">Home</a>
        </div>
      </div>
    </nav>
    <%!String greeting = "Book Market Mall"; 
    	String tagline = "Welcome to Book Market!";%>
    <div class="jumbotron">
      <div class="container">
        <h1 class="display-3"><%=greeting%></h1>
      </div>
    </div>
    <div class="container">
      <div class="text-center">
        <h3><%=tagline%></h3>
      </div>
    </div>
  </body>
</html>

 

 

 

 

 

자주 쓰는 페이지는 모듈화로 만들어놓기

 

 

menu.jsp

<%@ 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>
	<nav class="navbar navbar-expand navbar-dark bg-dark">
		<div class="container">
			<ul class="navbar-nav">
				<li class="nav-item active"><a class="nav-link"
					href="./welcome.jsp">Home</a></li>
				<li class="nav-item active ml-5"><a class="nav-link"
					href="./books.jsp">Books</a></li>
			</ul>
		</div>
	</nav>
</body>
</html>

 

 

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
    <footer class="container">
      <p>&copy; BookMarket</p>
    </footer>

 

 

 

welcome.jsp 수정

-> menu.jsp와 footer.jsp 모듈 추가 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<title>Welcome</title>
</head>
<body>
	<jsp:include page="menu.jsp" />
	<%!String greeting = "📖"+" "+"Book Market Mall";
	String tagline = "Welcome to Book Market!";%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><%=greeting%></h1>
		</div>
	</div>
	<div class="container">
		<div class="text-center">
			<h3><%=tagline%></h3>
		</div>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>

<jsp:include page="menu.jsp"/>

<jsp:include page="footer.jsp"/>

 

<jsp:include page=> : 다른 페이지에 있는 코드를 사용할 수 있게 해줌

 

 

 

 

'BACKEND > Jsp' 카테고리의 다른 글

북마켓 프로젝트 3  (0) 2023.09.22
북마켓 프로젝트2  (0) 2023.09.22
브라우저에 데이터 저장하는 Cookies 예제  (0) 2023.09.20
JSP session (세션) 및 예제  (0) 2023.09.20
JSP Form 만들기  (0) 2023.09.20
ㄴ

티스토리툴바