해당 글은 groomedu의 스프링부트 나만의 블로그 만들기 강의를 보고 개인적으로 정리한 글입니다.
header와 footer는 모든 페이지에서 동일하게 들어가기 때문에 매번 코드를 넣어주는데 번거로움이 있음.
해결
1. header와 footer를 jsp 두개로 분리하고 layout 폴더 밑에 놓음.
2. index.jsp 에서 include해서 불러옴.
index.jsp
<%@include file="layout/header.jsp" %>
<div class="container">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</div>
<br/>
<%@include file="layout/footer.jsp" %>
header.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cos 블로그</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">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/blog/">홈</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="/blog/user/loginForm">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog/user/joinForm">회원가입</a>
</li>
</ul>
</div>
</nav>
<br/>- 로그인 클릭 시 /blog/user/loginForm으로 GET 요청
- 회원가입 클릭 시 /blog/user/joinForm으로 GET 요청
footer.jsp
<br/>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Create by Cos</p>
<p>📞 010-2222-7777</p>
<p>🏴 부산 수영구 XX동 </p>
</div>
<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>
</body>
</html>'Spring > SpringBoot' 카테고리의 다른 글
| [goormedu 강의] 스프링부트 블로그 만들기 05 - 05 회원가입하기 Ajax 요청 (0) | 2024.08.28 |
|---|---|
| [goormedu 강의] 스프링부트 블로그 만들기 05 - 03 회원가입을 위한 기초 세팅 (0) | 2024.08.28 |
| [goormedu 강의] 스프링부트 블로그 만들기 05 - 01 메인화면 만들기 (0) | 2024.08.24 |
| [goormedu 강의] 스프링부트 블로그 만들기 04 - 09 Json 데이터로 통신하기 (0) | 2024.08.24 |
| [goormedu 강의] 스프링부트 블로그 만들기 04 - 08 Exception 처리하기 (0) | 2024.08.24 |
