header.mustache
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>스프링 부트 웹서비스</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
</head>
<body>footer.mustache
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>- 페이지 로딩 속도를 높이기위해 css 는 header에, js는 footer에 둠
- HTML은 위에서부터 코드가 실행되어서 head가 실행되고 나야 body가 실행된다.
- 즉 head가 다 불러지지 않으면 사용자 쪽에선 백지마 노출됨
- 특히 js의 용량이 크면 클수록 body의 호출이 늦어지기 때문에 js는 body 하단에 두어 화면이 다 그려진 뒤에 호출하는 것이 좋다.
- css는 화면을 그리는 역할이기때문에 head에 둔다 다 불러지지않은채로 화면이 불려와지면 css가 적용되지 않은 화면을 볼 수 있기 떄문.
이후 index에 header와 footer를 import해준다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>스프링 부트 웹서비스</title>
</head>
<body>
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스</h1>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<a href="/posts/save" role="button" class="btn btn-primary">
글 등록
</a>
</div>
</div>
</div>
{{>layout/footer}}
</body>
</html>- musthace 템플릿 엔진에선 {{>경로}} 로 import할 수 있다
Software VS Me