• webapp/WEB-INF/view/static/css - css 파일 ( VSC에서 작업 )
• webapp/WEB-INF/view/blog - jsp 파일 ( 이클립스에서 작업 )
▪︎ blog 폴더에 layout.jsp 생성
전체적인 layout 가정 : header / content / footer
※ <%@ include file='파일경로' %>
- JSP 페이지를 멀티 페이지로 만들어 공통으로 사용하는 부분(header, footer 등)과 새로운 내용으로 나타내야 하는 부분을 분리한 후, 필요한 경우에 다른 문서를 포함하여 하나의 문서로 만드는 지시자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/layout.css">
<body>
<%--
* JSP 페이지를 멀티 페이지로 만들어 공통으로 사용하는 부분(header, footer 등)과
새로운 내용으로 나타내야 하는 부분을 분리한 후,
필요한 경우에 다른 문서를 포함하여 하나의 문서로 만드는 지시자
<%@ include file='파일경로' %>
--%>
<div class="container">
<%@ include file="./header.jsp" %>
<%@ include file="./contents.jsp" %>
<%@ include file="./footer.jsp" %>
</div>
</body>
</html>
▪︎ header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 헤더영역 시작 -->
<!-- TOP -->
<div class="top">
<span> TOP (1000 x 80) <br /> #FF5EOO; </span>
</div>
<!-- 헤더영역 끝 -->
▪︎ contents.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 컨텐츠 영역 시작 -->
<!-- MIDDLE -->
<div class="middle">
<div class="middle-left">
<span> LEFT (600 x 500) <br />
#OOD8FF; </span> </div>
<div class="middle-right">
<div class="middle-right-1">
<span> RIGHT1 (380 x 150) <br />
#FFOODD; </span> </div>
<div class="middle-right-2">
<span> RIGHT2 (380 x 150) <br />
#FFE4OO; </span> </div>
<div class="middle-right-3">
<span> RIGHT3 (380 x 180) <br />
#99EOOO; </span> </div>
</div>
</div>
<!-- 컨텐츠 영역 끝 -->
▪︎ footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 푸터 영역 시작 -->
<div class="bottom">
<span>BOTTOM (1000 x 100) <br /> #5D5D5D;</span>
</div>
<!-- 푸터 영역 끝 -->
'백엔드 > Spring Boot' 카테고리의 다른 글
| 6. 블로그 기획하고 API 만들기 (3) - 블로그 글 작성을 위한 API 구현❶ (0) | 2023.07.26 |
|---|---|
| 6. 블로그 기획하고 API 만들기 - (2) 블로그 개발을 위한 엔티티 구성하기 (0) | 2023.07.26 |
| 6. 블로그 기획하고 API 만들기 (1) - API와 REST API (0) | 2023.07.24 |
| 5. 데이터베이스 조작이 편해지는 ORM (2) - JPA와 하이버네이트, 스프링 데이터와 스프링 데이터 JPA (0) | 2023.07.18 |
| 5. 데이터베이스 조작이 편해지는 ORM (1) - 데이터베이스, ORM (0) | 2023.07.17 |