1. 레이아웃 구성하기
상단쪽에 header , nav
중앙부분 aside, container
하단부분 footer
로 레이아웃을 구상하고 제작해보자
2. 상단, 하단 파일 생성
layoutNav.jsp 파일 생성
상단부분 코드를 이런식으로 구성해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div style="width:100%; height:200px; background:black; color:white">
<h1>TIS.Edu</h1>
</div>
<div style="width:100%; height:50px; background:gray;">
Home | About | History | 회사연혁 | Curriculmn | Cantact
</div>
layoutFooter.jsp 파일 생성
하단부분 코드를 이런식으로 구성해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div style="height:100px; background:gray; clear:both;">
TIS.Edu© All rights reserved.
</div>
3. 몸통에 include 하기 !
layout.jsp 파일 생성
메인 코드를 이런식으로 구성해준 후 원하는 위치에 include까지 해준다.
<%@ 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>
<body>
<%@ include file ="layoutNav.jsp" %> // 상단 파일
<div style="width:250px; height:500px; float:left; background:#ddd;"></div>
<div style="height:500px;">
<h3>TIS.Edu소개</h3>
<p>TIS.Edu는 정부지원 IT전문 교육기관</p>
</div>
<%@ include file ="layoutFooter.jsp" %> // 하단 파일
</body>
</html>'Back-End' 카테고리의 다른 글
| [rabbitMQ] M2칩 환경 SpringBoot + rabbitMQ 연동 (0) | 2022.08.23 |
|---|---|
| [팀프로젝트] - ERD 제작 (0) | 2022.06.17 |
| [jsp] MVC Model2을 이용하여 게시판 만들기 [1편] (0) | 2022.05.04 |
| [jsp] HTTP 에러 코드 모음 (번호) (0) | 2022.04.15 |
| [jsp] requestParameter를 이용한 post방식 데이터 받기 (0) | 2022.04.14 |
