💡 학습목표
정적 파일은 static 폴더에 들어간다
html, css, js, image 추가 할 수 있다
동적 파일 JSP 설정
1. yml파일 설정 확인하기1.yml파일 설정 확인하기
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'Spring Framework의 Spring MVC 모듈에서 사용되는 뷰 리졸버(View Resolver)에 대한 설정
spring:
mvc:
view:
prefix: /WEB-INF/view/
suffix: .jsp뷰 리졸버(View Resolver): Spring MVC는 컨트롤러에서 반환한 뷰 이름을 실제 뷰 파일로 찾는 역활을 합니다.
- layout 구성하기
3wschool
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>jsp 파일에 반드시 명시해주어야 한다.
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>
<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>
<div class="f--wrap">
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>
</body>
</html>결과 화면 보기
