ν νλ¦Ώ μμ λ° μ μ νμΌ μ€λΉ
μ΄λ²μλ 곡ν΅μ μΌλ‘ μ¬μ©λλ νλ©΄ λ μ΄μμμ λ°λ³΅ν΄μ μ½λλ₯Ό μμ±νμ§ μκ³ κ° μμ λ³λ‘ JSP νμ΄μ§λ₯Ό μμ±νκ³ μ΄λ€μ κ΅¬μ± μμλ‘ ν¬ν¨μμΌ μΌκ΄λ λ μ΄μμμ μ 곡ν΄μ€ μ μλ κ΅¬μ‘°λ‘ νλ©΄ κ°λ°μ ν μ μλλ‘ νλ μμ
μ ν΄λ³΄λλ‘ νκ² μ΅λλ€.
λν μ μ νμΌκ³Ό CSS νλ μμν¬μΈ Bootstrap μ μ¬μ©ν μ μλλ‘ μ μ νμΌλ€μ μ€λΉν΄ 보λλ‘ νκ² μ΅λλ€.
μμ μμ
1.
ν
νλ¦Ώ μμ
a.
UI
i.
header.jsp
ii.
footer.jsp
iii.
menu.jsp
b.
import
i.
meta.jsp
ii.
link.jsp
iii.
script.jsp
2.
μ μ νμΌ μ€λΉ
a.
style.css
b.
script.js
c.
bootstrap (CDN)
i.
bootstrap.min.css
ii.
bootstrap.bundle.min.js
ν νλ¦Ώ μμ
UI
β’
header.jsp
β’
footer.jsp
β’
menu.jsp
νλ©΄ κ΅¬μ± μμλ ν€λ, νΈν°, λ©λ΄ μμμΌλ‘ λλμ΄ λ³΄λλ‘ νκ² μ΅λλ€ κ·Έλ¦¬κ³ κ°κ°μ μμμ header.jsp, footer.jsp, menu.jspλ‘ νμ΄μ§λ₯Ό μμ±ν΄μ λΆλ¦¬νλλ‘ νκ² μ΅λλ€.
import
β’
meta.jsp
β’
link.jsp
β’
script.jsp
<head> νκ·Έμμ μμ±νλ html λ¬Έμμ <meta> νκ·Έλ€κ³Ό <title> νκ·Έ λ±μ meta.jjspμ κ·Έλ¦¬κ³ μΈλΆ css νμΌμ ν¬ν¨νλ <link> νκ·Έλ€μ link.jspμ κ·Έλ¦¬κ³ μλ°μ€ν¬λ¦½νΈ μΈλΆ νμΌμ ν¬ν¨νλ <script> νκ·Έλ€μ script.jspμ λΆλ¦¬νμ¬ μμ±νκ² μ΅λλ€.
ν΄λ μμ±
webapp/
β
βββ layout/
β
βββ main/
βββ import/
β βββ meta.jsp
β βββ link.jsp
β βββ script.jsp
β
βββ UI/
βββ header.jsp
βββ footer.jsp
βββ menu.jsp
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String root = request.getContextPath(); %>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCollapse">
<!-- ########## menu π ########## -->
<jsp:include page="/layout/main/UI/menu.jsp" />
<!-- ########## menu π© ########## -->
<form class="d-flex" role="search">
<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>
</header>
HTML
볡μ¬
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<footer class="container p-5">
<p class="text-center">Copyright β ALOHA CLASS. All Rights Reserved</p>
</footer>
HTML
볡μ¬
menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Board</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
-->
</ul>
HTML
볡μ¬
meta.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String root = request.getContextPath(); %>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boardπ©πΌβπ« - 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/6x2YUgm.jpg">
<!-- μΉ νμ΄μ§ μ€λͺ
(μ ν μ¬ν) -->
<meta property="og:description" content="ALOHA CLASSπ΄ - κ²μν νλ‘μ νΈ">
<!-- μΉ νμ΄μ§ URL -->
<meta property="og:url" content="<%= root %>">
<!-- μΉ νμ΄μ§ μ λͺ© -->
<meta name="title" content="Boardπ©πΌβπ« - ALOHA CLASSπ΄">
<meta property="og:title" content="Boardπ©πΌβπ« - 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">
HTML
볡μ¬
link.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String root = request.getContextPath(); %>
<!-- bootstrap css -->
<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">
<!-- Noto Sans font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap">
<!-- style -->
<link href="<%= root %>/static/css/style.css" rel="stylesheet" />
HTML
볡μ¬
script.jsp
<%@ 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" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String root = request.getContextPath(); %>
<c:set var="root" value="<%= root %>" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<!-- js -->
<script src="<%= root %>/static/js/script.js" ></script>
HTML
볡μ¬
μ μ νμΌ μ€λΉ
webapp/
β
βββ static/
βββ css/
β βββ style.css
βββ js/
β βββ script.js
βββ img/
βββ logo.png
style.css
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body {
font-family: 'Noto Sans', sans-serif !important;
}
HTML
볡μ¬
script.js
/**
* javascript - script.js
*/
HTML
볡μ¬
bootstrap
β’
bootstrap.min.css
β’
bootstrap.bundle.min.js
β’
link.jsp
<!-- bootstrap css -->
<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">
HTML
볡μ¬
β’
script.jsp
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
HTML
볡μ¬
κ²°κ³Όνλ©΄
λ€μκ³Ό κ°μ΄ JSP νμΌκ³Ό μ μ νμΌλ€μ μ€λΉ νμλ€λ©΄, μ΄μ jspλ‘ κ²μν νλ‘μ νΈλ₯Ό κ°λ°ν΄ 보기 μν μ€λΉ μμ
μ΄ λͺ¨λ μλ£ λμμ΅λλ€. λ€μ νμ΄μ§μμ λ©μΈ νλ©΄λΆν° JSP κ²μν νλ‘μ νΈλ₯Ό κ°λ°ν΄λ³΄λλ‘ νκ² μ΅λλ€.