728x90
반응형
1. 프레임워크와 라이브러리의 개념
2. IoC의 개념(제어의 역전
3. 프레임워크로 구현하기
(1) 메인 컨트롤러(mainController.java)
package com.tenco.bank.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller // IoC의 대상(싱글톤 패턴으로 관리된다.)
// IoC = inversion of controll (=제어의 역전)
public class MainController {
// REST API 기반으로 주소 설계 가능
// 주소 설계
// http://localhost:8080/main-page
@GetMapping({"/main-page", "/index"})
public String mainPage() {
System.out.println("mainPage() 호출 확인");
// [JSP 파일 찾기(yml)] - 뷰 리졸버
// prefix: /WEB-INF/view
// /main
// suffix: .jsp
// application.yml 에서 설정한 전위, 후위연산자를 통해 더욱 간단하게 사용이 가능하다.
return "/main";
}
}
(2) 메인 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>myBank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/common.css">
<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.7.1/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>
</head>
<body>
<div class="jumbotron text-center m--banner-imgs"
style="margin-bottom: 0">
<h1>My Bank</h1>
<p>MyBatis를 활용한 Springboot 앱 만들어보기</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</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="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</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>코린이 개발을 위한 뱅크 앱</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 active" href="#">Active</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<!-- END OF HEADER.JSP -->@charset "UTF-8";
.m--banner-imgs {
background-image: url(https://picsum.photos/id/1/600);
width: 100%;
background-size: cover;
background-position: center;
}
.m--profile {
background-image: url(https://picsum.photos/id/1/350);
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}
(1) header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>myBank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/common.css">
<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.7.1/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>
</head>
<body>
<div class="m--flex-container">
<div class="m--container">
<div class="jumbotron text-center m--banner-imgs"
style="margin-bottom: 0">
<h1>My Bank</h1>
<p>MyBatis를 활용한 Springboot 앱 만들어보기</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</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="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</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>코린이 개발을 위한 뱅크 앱</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 active" href="#">Active</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<!-- END OF HEADER.JSP -->
(2) main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- header.jsp -->
<%@ include file="/WEB-INF/view/layout/header.jsp" %>
<!-- START OF CONTENT.JSP(XXX.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 CONTENT.JSP(XXX.JSP) -->
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>
(3) footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- START OF FOOTER.JSP -->
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>
<!-- END OF FOOTER.JSP -->
(4) common.css
@charset "UTF-8";
body{
height: 100vh;
margin: 0;
}
.m--flex-container {
display: flex;
flex-direction: column;
height: 100%;
}
.m--container {
flex: 1;
}
.m--banner-imgs {
background-image: url(https://picsum.photos/600);
width: 100%;
background-size: cover;
background-position: center;
}
.m--profile {
background-image: url(https://picsum.photos/id/1/350);
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}728x90
반응형
'Springboot' 카테고리의 다른 글
| [SpringBoot] 8. 에러 페이지 생성 (0) | 2024.08.06 |
|---|---|
| [SpringBoot] 7. Exception Handler 처리 (0) | 2024.08.05 |
| [SpringBoot] 5. 화면 구현 (0) | 2024.08.05 |
| [SpringBoot] 4. 모델링(2) - DTO 모델링 (0) | 2024.08.05 |
| [SpringBoot] 4. 모델링(1) - DB 모델링 (0) | 2024.08.05 |