Search

ν…œν”Œλ¦Ώ μž‘μ—… 및 μ •μ νŒŒμΌ μ€€λΉ„

ν…œν”Œλ¦Ώ μž‘μ—… 및 μ •μ νŒŒμΌ μ€€λΉ„

μ΄λ²ˆμ—λŠ” κ³΅ν†΅μ μœΌλ‘œ μ‚¬μš©λ˜λŠ” ν™”λ©΄ λ ˆμ΄μ•„μ›ƒμ„ λ°˜λ³΅ν•΄μ„œ μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ§€ μ•Šκ³  각 μ˜μ—­ λ³„λ‘œ 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 κ²Œμ‹œνŒ ν”„λ‘œμ νŠΈλ₯Ό κ°œλ°œν•΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.