728x90
💡 작업 순서
1. 부트스트랩 활용 하기
Bootstrap은 간단하게 UI를 구성할 수 있는 CSS 및 JavaScript 프레임워크입니다.
프로젝트에서 부트스트랩을 활용하여 반응형 웹 페이지를 빠르게 제작할 수 있습니다.
2. main.jsp 파일 생성
main.jsp 파일을 생성하고, 이를 기본 템플릿 파일로 사용합니다.
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
결과 확인 !
간단하게 설명해서 우리가 생성한 서버에서 접근 방식을
호스명:포트번호:자원에위치를 통해서 요청을 하였고 HTML 파일 형식으로 응답 받은 후 우리 로컬 프로그램인 웹 브라우저가 태그를 분석해서 렌더링 과정을 확인 하였습니다.
2. SSR(Server-Side Rendering) 설정
SSR이란?
**SSR(Server-Side Rendering)**은 서버에서 HTML을 완성하여 클라이언트(브라우저)에 전송하는 렌더링 방식입니다.
- 초기 로딩 속도 향상: 브라우저가 완성된 HTML을 받아 빠르게 콘텐츠를 표시.
- SEO(검색 엔진 최적화) 유리: 검색 엔진이 크롤링하기 쉽도록 콘텐츠를 제공.
- 서버 부하 증가 가능성: 서버가 렌더링 작업을 처리해야 하므로 트래픽이 많은 경우 부하가 증가할 수 있음.
<%@ 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.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>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>My Bank</h1>
<p>마이바이티스를 활용한 스프링 부트 앱 만들어보기</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="fakeimg">Fake Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</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 -->
<!-- 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) -->
<!-- start of footer.jsp -->
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
<!-- end of footer.jsp -->
</body>
</html>'Spring' 카테고리의 다른 글
| [Spring boot] Bank App - MainController, mainPage.jsp 구현 (2) | 2025.01.15 |
|---|---|
| [Spring boot] Bank App - 화면 구현(레이아웃 분리) (0) | 2025.01.15 |
| [Spring boot] Bank App - 모델링 (1) | 2025.01.14 |
| [Spring boot] Bank App - 코딩 컨벤션 (0) | 2025.01.14 |
| [Spring boot] Bank App - 패키지 설정 (0) | 2025.01.14 |