[Spring] 07. 초기 레이아웃 설정 (header.jsp / nav.jsp / footer.jsp)

[Spring] 07. 초기 레이아웃 설정 (header.jsp / nav.jsp / footer.jsp)개발자가 되기까지 (2023.08.16~2024.04.15)/[Spring] Basic Web2024. 1. 16. 21:19@rlozlr

Table of Contents

src > main > webapp > WEB-INF > views > layout 폴더에

header.jsp / nav.jsp / footer.jsp 를 생성하고 초기 레이아웃을 작성했다.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가필드</title>
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
	crossorigin="anonymous">
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
	crossorigin="anonymous"></script>
</head>
<body>
<h2>가 끔씩 쓸까봐 묵혀둔 물건</h2>
<h2>필 요한 사람에게</h2>
<h2>드 림!</h2>
<h1>가필드</h1>

nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">홈</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
    aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">글쓰기</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">드림</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">로그인</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">회원가입</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div>
	2024 GaFeelDream, Inc
</div>

</body>
</html>

[Spring] 07. 초기 레이아웃 설정 (header.jsp / nav.jsp / footer.jsp)

(다음 게시물 예고편)
[Spring] 08. 게시판의 초기 MVC 구성

728x90

저작자표시 비영리 변경금지

@rlozlr :: 얼렁뚱땅 개발자

얼렁뚱땅 주니어 개발자

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

티스토리툴바