JSP 레이아웃 구성하기

📦 project └── 📂 src ├── 📂 main ├── 📂 java │ └── 📂 filter │ └── 📄 EncodingFilter.java └── 📂 webapp ├── 📂 WEB-INF │ └── 📂 lib │ ├── 📄 lombok.jar │ ├── 📄 mysql-connector-j-9.0.0.jar │ ├── 📄 taglibs-standard-compat-1.2.5.jar │ ├── 📄 taglibs-standard-impl-1.2.5.jar │ ├── 📄 taglibs-standard-jstlel-1.2.5.jar │ ├── 📄 taglibs-standard-spec-1.2.5.jar │ ├── 📄 jbcrypt-0.4.jar │ └── 📄 alcl-jdbc.jar ├── 📂 static │ ├── 📂 css │ │ ├── 📄 reset.css │ │ └── 📄 style.css │ ├── 📂 img │ │ └── 📄 logo.png │ └── 📂 js │ └── 📄 script.js └── 📂 layout ├── 📄 jstl.jsp ├── 📄 header.jsp ├── 📄 footer.jsp ├── 📄 meta.jsp ├── 📄 link.jsp ├── 📄 script.jsp └── 📄 common.jsp └── 📄 index.jsp

... └── 📂 webapp ├── 📂 static │ ├── 📂 css │ │ ├── 📄 reset.css │ │ └── 📄 style.css │ ├── 📂 img │ │ └── 📄 logo.png │ └── 📂 js │ └── 📄 script.js ...

@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap'); /*reset*/ * {margin: 0; padding: 0; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;} h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;} a {text-decoration: inherit; color: inherit;} li {list-style: none;} img {vertical-align: middle;} a img {border: none;} a:focus {outline: none} button:focus {outline: none} body { font-family: 'Noto Sans KR', sans-serif; } /* 글씨 드래그 시, 상태를 지정하는 선택자 */ ::selection { background-color: var(--main-color); color: white; } /* ⭐ CSS 변수 선언 */ /* --변수명 : 값 */ /* ✅ 사용 : var(--변수명) */ /* html 최상위 요소 선택 (html 선택보다 높은 우선순위 */ :root { /* 👩‍🎨 메인 컬러 */ --main-color : #DCE6FF; /* 👩‍🎨 서브 컬러 */ --sub-color: #89B1FF; /* 👩‍🎨 폰트 사이즈 */ --text-title: 32px; --text-normal: 16px; /* 👩‍🎨 컨테이너 사이즈 */ --container-size: 1200px; --container-lg-size: 1400px; }

@charset "UTF-8"; .container, header, footer { width: var(--container-size); margin: 0 auto; } section { margin: 100px auto; min-height: 300px; } .text-title { font-size: 32px; }

/** * */ document.addEventListener("DOMContentLoaded", function() { alert("Hello JSP~!"); })

... 📂 webapp ├── 📂 WEB-INF │ └── 📂 lib │ ├── 📄 lombok.jar │ ├── 📄 mysql-connector-j-9.0.0.jar │ ├── 📄 taglibs-standard-compat-1.2.5.jar │ ├── 📄 taglibs-standard-impl-1.2.5.jar │ ├── 📄 taglibs-standard-jstlel-1.2.5.jar │ ├── 📄 taglibs-standard-spec-1.2.5.jar │ ├── 📄 jbcrypt-0.4.jar │ └── 📄 alcl-jdbc.jar ...

<%-- JSTL --%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%-- 전역변수 --%> <% // Context Path (루트 경로) String root = request.getContextPath(); // 로그인 아이디 (세션) String loginId = (String) session.getAttribute("loginId"); %>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/layout/common.jsp" %> <header> <img src="<%= root %>/static/img/logo.png" width="48" > <nav> <ul> <li><a href="<%= root %>/login.jsp">로그인</a></li> <li><a href="<%= root %>/signup.jsp">회원가입</a></li> </ul> </nav> </header>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/layout/common.jsp" %> <footer> <p>Copyright ALOHA CLASS</p> </footer>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/layout/common.jsp" %> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <title>project💻 - ALOHA CLASS🌴</title> --> <!-- 파비콘 --> <link rel="icon" href="<%= root %>/static/img/logo.png" type="image/x-icon"> <!-- 썸네일 이미지 설정 --> <meta property="og:image" content="https://i.imgur.com/yiTQ3EV.jpg"> <!-- 웹 페이지 설명 (선택 사항) --> <meta property="og:description" content="ALOHA CLASS🌴 - 쇼핑몰 프로젝트"> <!-- 웹 페이지 URL --> <meta property="og:url" content="<%= root %>"> <!-- 웹 페이지 제목 --> <meta name="title" content="project💻 - ALOHA CLASS🌴"> <meta property="og:title" content="project💻 - ALOHA CLASS🌴"> <!-- 웹 페이지 타입 (웹사이트, 기사, 제품 등) --> <meta property="og:type" content="website"> <!-- 검색어 --> <meta name="keywords" content="쇼핑몰 프로젝트, 자바 웹개발, ALOHA CLASS, 알로하 클래스"> <meta name="robots" content="index, follow"> <!-- 사이트 맵 --> <link rel="sitemap" href="<%= root %>/static/sitemap.xml">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/layout/common.jsp" %> <%-- 폰트 --%> <%-- 라이브러리 --%> <link href="<%= root %>/static/css/reset.css" rel="stylesheet" /> <link href="<%= root %>/static/css/style.css" rel="stylesheet" />

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/layout/common.jsp" %> <%-- 라이브러리 --%> <%-- jQuery --%> <script src="<%= root %>/static/js/script.js"></script>

<%@ include file="/layout/jstl.jsp" %> <%@ include file="/layout/common.jsp" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>project💻 - ALOHA CLASS🌴</title> <jsp:include page="/layout/meta.jsp" /> <jsp:include page="/layout/link.jsp" /> </head> <body> <jsp:include page="/layout/header.jsp" /> <%-- [Contents] ######################################################### --%> <div class="container"> <section> <h1 class="text-title">메인 화면</h1> <h3>project💻 - ALOHA CLASS🌴</h3> </section> </div> <%-- [Contents] ######################################################### --%> <jsp:include page="/layout/footer.jsp" /> <jsp:include page="/layout/script.jsp" /> </body> </html>