공통으로 사용되는 header, footer 설정
매 페이지마다 공통으로 사용될 header와 footer를 매번 계속 넣어주기보다는 header.html, footer.html파일을 만들어줘서 효율성을 높이고 싶어서 진행
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>게시판 프로젝트</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.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>
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Spring Boot Board Project</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">HOME</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="/userLogin">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/userJoin">회원가입</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>게시발</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.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>
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Copyright © Your Website 2023</p>
</div>
</body>
</html>
파일을 만들어주고 JQuery로 load 함수를 사용해서 html 불러오기
<!DOCTYPE html>
<html lang="en">
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""/>
<meta name="author" content=""/>
<!-- Favicon-->
<link type="image/x-icon" href="/static/assets/favicon.ico"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet"/>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/static/css/styles.css"/>
</head>
<body>
<div id="header"></div>
<!-- Section-->
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..."/>
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
$40.00 - $80.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<!--<script src="/static/js/scripts.js"></script>-->
<div id="footer"></div>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<!-- 이부분이 불러오는 코드-->
<script>
$(function() {
<!-- id값이 같은 값을 가져오는 #-->
$("#header").load("/templates/header.html");
$("#footer").load("/templates/footer.html");
});
</script>
</body>
</html>
오류 수정
이전에 완성되었던 HOME 화면에 header.html 과 footer.html을 적용시키니 SecurityConfig 설정을 해주고 나서 오류가 발생해서 화면이 깨졋다 jquery의 load 함수를 인식하다가 갑자기 인식이안돼서 404 오류가 발생했다. 검색을 해봤지만 해결하지 못했다.
멋있는 사람 - 일단 하자