본문 바로가기
⭐ SpringBoot/𝄜 게시판 with SpringBoot

5. 뷰 템플릿과 레이아웃

짱구네 2022. 3. 30. 17:04
728x90
반응형

레이아웃 작성하기

 

            헤더

--------------------

            본문

--------------------

            푸터

 

부트스트랩을 활용하여 레이아웃 쉽게 구성하기

getbootstrap.com

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

getstarted > statertemplate를 greetings.mustache에 붙여넣기

startertemplate code

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

네비게이션 바 추가하기

부트스트랩 홈페이지에서 화면 상단에 Docs에서 네이게이션을 검색하여 코드를 찾기

Navbar 코드를 복사하여 greetings 네이게이션 영역에 붙여넣기

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Navbar가 추가된 모습

footer 입력

    <!-- 사이트 인포메이션 footer -->
    <div class="mb-5 container-fluid">
        <hr>
        <p>@ CloudStudying ㆍ <a href="#">Privacy</a> ㆍ <a href="#">Terms</a></p>
    </div>>

content 부분을 아래와 같이 변경 css를 적용

<!-- 컨텐츠 -->
<div class="bg-dark text-white p-5">
    <h1>{{username}}님, 안녕하세요!!</h1>
</div>

현재 페이지의 헤어와 푸터는 greeting에만 적용된 것이기 때문에 다른 페이지에는 적용이 되어 있지 않다.

이것을 공통으로 적용하기 위해서는 레이아웃 템플릿을 적용 해야한다.

 

레이아웃 템플릿 생성

템플릿화란 헤더 코드와 풋터 코드 등을 변수화시켜서 여러 사이트에 공통적으로 적용하도록 하는 것이다.

1. 템플릿 폴더에 헤더와 푸터 파일을 생성하기

templates > layouts 폴더를 생성한다.

생성한 레이아웃 폴더에 header.mustache 파일과 footer.mustache 파을을 각각 생생해 준다.

그리그 이전에 greeting 파일에서 생성한 헤더 부분의 코드를 > header.mustache로 잘라내기 후 붙여넣기

> 푸터 부분을 footer.mustache 파일로 잘라내기 후 붙여넣기를 수행한다.

 

레이아웃 템플릿 

불러오는 코드 {{>layouts/header}}, {{>layouts/footer}}

적용된 greetings의 코드 모습

{{>layouts/header}}
<!-- 컨텐츠 -->
<div class="bg-dark text-white p-5">
    <h1>{{username}}님, 안녕하세요!!</h1>
</div>
{{>layouts/footer}}

goodbye 페이지에도 동일하게 적용한다.

728x90
반응형
저작자표시 비영리 변경금지

'⭐ SpringBoot > 𝄜 게시판 with SpringBoot' 카테고리의 다른 글

7. 데이터 생성 with JPA  (0) 2022.03.31
6. 폼데이터 주고받기  (0) 2022.03.31
4. 모델, 뷰, 컨트롤러의 역할  (0) 2022.03.30
3. 뷰 템플릿과 MVC 패턴  (2) 2022.03.30
2. 웹서비스 동작 원리  (0) 2022.03.30

'⭐ SpringBoot/𝄜 게시판 with SpringBoot' Related Articles

티스토리툴바