2024.02.28 myboard- 부트스트랩 활용 menu.jsp, board.jsp
2024. 2. 28. 21:12ㆍ복습/스프링-게시판만들기
부트스트랩 사이트 > 이블로그에 설명을 잘해 놓아서 참고했다.
🔮 부트스트랩 템플릿 사이트 모음집
부트스트랩 템플릿 사이트 모음 Bootstrap는 반응형 웹디자인을 기본으로 하고 있고, 다양한 웹 요소들의 디자인과 기능을 포함하고 있어 손 쉽게 사이트를 제작할 수 있다. 자신의 사이트에 맞는
inpa.tistory.com
부트스트랩 가져오는 방법은 이 블로그를 참고했다.
https://dorothy-yang.tistory.com/226
[Spring - BootStrap] 스프링에서 부트스트랩 적용하기
스프링에 내가 원하는 부트스트랩 적용해서 플젝하고 싶다구요~? 🤔 걱정말아요~ 다 할 수 있답니다 :) 1. 부트스트랩 가져오기 - 아래 블로그 덕분에 다양한 부트스트랩을 구경할 수 있었어요
dorothy-yang.tistory.com
index.jsp 만들기
원하는 테마의 부트스트랩 다운 >index.html 눌르기 >페이지소스보기로 복사> index.jsp 붙여넣기
리소스 파일에 붙여넣기
부트스트랩 가져오기> 리소스에 vendor가 가져와지지 않아서 나는 빼고 가져왔다.
BoardController > index 만들어주기
@GetMapping("/index")
public String index() {
return "index";
}
부트스트랩이 깨져서 한참 찾아보니 경로 지정을 잘해줘야한다. (css,js 등)
나는 이부분 경로지정을 잘 해주니, 깨지지 않고 가져와졌다.
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />코드 수정전
<!-- Core theme CSS (includes Bootstrap)-->
<link href="resources/css/styles.css" rel="stylesheet" />코드 수정후
테마가 잘 안맞는게 있어서 다시 가져왔다. > 역시 가져올 때 css, js에 경로 설정을 잘 해줘야 한다.
menu.jsp 만들기
index.jsp에 있는 <!-- Navigation--> 아래 <nav>태그에 있는 것들 menu.jsp로 옮기고
<%@ include file="menu.jsp" %> 넣어주기
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3"
id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="./index">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="./board">게시판</a></li>
<li class="nav-item"><a class="nav-link" href="./notice">공지사항</a></li>
</ul>
</div>
</div>
</nav>
index.jsp> <!-- Navigation--> 아래는 이렇게 있다.
<!-- Navigation-->
<%@ include file="menu.jsp" %>
menu.jsp에는 일단 만들 게시판 적어주고 차차 만들어나가자.
board.jsp 꾸며주기
JSTLurl 넣어주기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
제이쿼리 넣어주기
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
iddex에 있는 <section> 부분 가져와서 사용하기 > 난 <!-- Services--> 부분 사용
<!-- Services-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-gem fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Sturdy Themes</h3>
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Up to Date</h3>
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-globe fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Ready to Publish</h3>
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Made with Love</h3>
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
</section>
<!-- 게시판-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>날짜</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="row">
<tr>
<td>${row.board_no}</td>
<td>${row.board_title}</td>
<td>${row.board_write}</td>
<td>${row.board_date}</td>
<td>${row.board_count}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
하...오늘은 여기까지....부트스트랩 가져오는게 쉽지않아서 한참 헤맸다.
정처기 실기도 공부해야하는데...시간이 너무 많이 흘렀다.
부트스트랩 활용한 board.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Creative - Start Bootstrap Theme</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
rel="stylesheet" />
<!-- Google fonts-->
<link
href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="resources/css/styles.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body id="page-top">
<!-- Navigation-->
<%@ include file="menu.jsp"%>
<!-- 게시판-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">MY BOARD</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>날짜</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="row">
<tr>
<td>${row.board_no}</td>
<td>${row.board_title}</td>
<td>${row.board_write}</td>
<td>${row.board_date}</td>
<td>${row.board_count}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="resources/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>'복습 > 스프링-게시판만들기' 카테고리의 다른 글
| 스프링 mvc - 블로그 만들기/dao클래스 생성 (1) | 2024.09.27 |
|---|---|
| 스프링 mvc - 블로그 만들기/controller/view (1) | 2024.09.25 |
| 2024.02.27 myboard- board (0) | 2024.02.22 |
| 2024.02.22 myboard- 설치 및 환경설정 (0) | 2024.02.22 |