[IntelliJ]에서 [Spring] 적용하기 (3)

3. 페이지 만들기

하세연

Aug 14, 2024

Contents

1. application.properties 설정하기 2. header와 footer 파일 만들기 footer.mustache(F영역)3. 기존 코드 수정

1. application.properties 설정하기

설정하면 이후 사이트에서 한글이 잘 나오게 된다

2. header와 footer 파일 만들기

중복되는 header와 footer 를 따로 빼낸다

header.mustache(H영역)


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="list.html">Metacoding</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="/save-form.html">글쓰기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

footer.mustache(F영역)


<footer class="bg-light p-5 text-center">
    <h4>Created by Metacoding</h4>
    <h5>☎ 010-2222-7777</h5>
    <button class="btn btn-outline-primary">고객센터</button>
    <button class="btn btn-outline-primary">오시는길</button>
</footer>
</body>

</html>

3. 기존 코드 수정

기존 파일의 header, footer 부분을 빼내고 {{>파일명}} 을 추가하여 header와 footer 를 채운다


{{>layout/header}}

<div class="container p-5">

    <!-- 수정삭제버튼 -->
    <div class="d-flex justify-content-end">
        <a href="/update-form.html" class="btn btn-warning me-1">수정</a>
        <form>
            <button class="btn btn-danger">삭제</button>
        </form>
    </div>

    <div class="d-flex justify-content-end">
        <b>작성자</b> : 익명
    </div>

    <!-- 게시글내용 -->
    <div>
        <h2><b>제목1</b></h2>
        <hr/>
        <div class="m-4 p-2">
            내용1
        </div>
    </div>
</div>

{{>layout/footer}}

<!DOCTYPE html> <html lang="en"> <head> <title>Blog</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="list.html">Metacoding</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="/save-form.html">글쓰기</a> </li> </ul> </div> </div> </nav>

<footer class="bg-light p-5 text-center"> <h4>Created by Metacoding</h4> <h5>☎ 010-2222-7777</h5> <button class="btn btn-outline-primary">고객센터</button> <button class="btn btn-outline-primary">오시는길</button> </footer> </body> </html>

{{>layout/header}} <div class="container p-5">  <div class="d-flex justify-content-end"> <a href="/update-form.html" class="btn btn-warning me-1">수정</a> <form> <button class="btn btn-danger">삭제</button> </form> </div> <div class="d-flex justify-content-end"> <b>작성자</b> : 익명 </div>  <div> <h2><b>제목1</b></h2> <hr/> <div class="m-4 p-2"> 내용1 </div> </div> </div> {{>layout/footer}}