💡 학습 목표
1. 재사용 가능한 파일로 분리 하기
2. layout/header.jsp
3. layout/footer.jsp
4. layout/main.jsp → jsp 태그 추가 하기
5. 외부 스타일 시트로 수정 1. 재사용 가능한 파일로 분리하기
분리영역 표시하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.m--profile {
background-image: url(https://picsum.photos/id/1/350);
background-size: cover;
background-position: center;
width: 100%;
height: 200px;
}
.f--wrap {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: #f8f9fA;
}
.banner--imge {
background-image: url(https://picsum.photos/600);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="jumbotron text-center banner--imge" style="margin-bottom:0">
<h1>Tencoding Bank</h1>
<img alt="banner" src="https://picsum.photos/seed/picsum/200/200">
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">MENU</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="m--profile"></div>
<p>tencoding bank app</p>
<h3>Some Links</h3>
<p>Lorem ipsum dolor sit ame.</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">계좌 생성</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">계좌 목록</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">입금</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">출금</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">이체</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<!-- end of header.jsp -->
<!-- start main.jsp -->
<div class="col-sm-8">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<!-- end of main.jsp -->
<!-- start footer.jsp -->
<div class="f--wrap">
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>
</body>
</html>
<!-- end of footer.jsp -->header, main, footer로 분리
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.m--profile {
background-image: url(https://picsum.photos/id/1/350);
background-size: cover;
background-position: center;
width: 100%;
height: 200px;
}
.f--wrap {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: #f8f9fA;
}
.banner--imge {
background-image: url(https://picsum.photos/600);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="jumbotron text-center banner--imge" style="margin-bottom:0">
<h1>Tencoding Bank</h1>
<img alt="banner" src="https://picsum.photos/seed/picsum/200/200">
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">MENU</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="m--profile"></div>
<p>tencoding bank app</p>
<h3>Some Links</h3>
<p>Lorem ipsum dolor sit ame.</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">계좌 생성</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">계좌 목록</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">입금</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">출금</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">이체</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<!-- end of header.jsp -->main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/layout/header.jsp" %>
<!-- start main.jsp -->
<div class="col-sm-8">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<!-- end main.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- start footer.jsp -->
<div class="f--wrap">
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>
</body>
</html>
<!-- end of main.jsp -->