작업 순서
1. 부트스트랩 활용 하기
2. main.jsp 파일 생성
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_template1
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 파일 형식으로 응답 받은 후 우리 로컬 프로그램인 웹 브라우저가 태그를 분석해서 렌더링 과정을 확인 하였습니다.
SSR 렌더링을 하기 위해서 yml 설정 파일을 한번더 확인해 봅시다.
SSR(Server-Side Rendering)은 서버 측에서 HTML을 렌더링하는 방식을 의미합니다. 클라이언트(브라우저)가 웹 페이지에 접근할 때, 서버는 해당 페이지의 HTML을 완성하여 클라이언트에 전송합니다. SSR의 주요 특징 초기 로딩 속도: 사용자가 처음으로 웹 페이지에 접근할 때, 완성된 HTML 페이지를 바로 받기 때문에 초기 로딩 속도가 빠릅니다. SEO 최적화: 검색 엔진이 콘텐츠를 크롤링할 때, 완성된 HTML을 바로 볼 수 있기 때문에 SEO(검색 엔진 최적화)에 유리합니다. 서버 부하: 모든 페이지 렌더링 작업이 서버에서 이루어지기 때문에, 클라이언트의 하드웨어 사양에 관계없이 일관된 사용자 경험을 제공할 수 있습니다. 하지만, 이는 동시에 서버에 더 많은 부하를 줄 수 있습니다.
💡 레이아웃 설정하기
매번 헤더와 푸터를 작성하는 것은 매우 반복적인 작업 입니다. 파일을 header.jsp, footer.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.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 boot > Bank App 만들기' 카테고리의 다른 글
| 9. MainController, mainPage.jsp 구현 (0) | 2024.08.07 |
|---|---|
| 8. 화면 구현 -2(레이아웃 분리) (0) | 2024.08.07 |
| 6. 모델링 (0) | 2024.08.07 |
| 5. 코딩 컨벤션 (0) | 2024.08.07 |
| 4. 패키지 설정 (0) | 2024.08.07 |
