인텔리가 '되고 싶은' 인텔리재이

[JSP + MyBatis] 4. 화면에 부트스트랩(Bootstrap) 적용하기 본문

✨LEVEL UP🎇/PROJECT

[JSP + MyBatis] 4. 화면에 부트스트랩(Bootstrap) 적용하기

인텔리재이 2023. 1. 27. 16:55

🕶 참고 포스팅

이번 포스팅에서는 게시판 CRUD를 구현하기에 앞서,

화면의 디자인을 빠르고 예쁘게! 만들어줄 수 있는 Bootstrap을 적용하기 위한 방법을 소개해드리겠습니다!

 

Bootstrap?

 

부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
- 출처 : https://ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

코드 몇줄만 추가하여도 부트스트랩에서 지원하는 디자인을 손쉽게 사용할 수 있어

디자인 구현에 들어가는 시간을 줄일 수 있고, 코드도 간단해진다는 크나큰 장점이 있습니다!🖼

 

하지만 정해진 디자인 외에 원하는 디자인으로 수정하기가 (은근히) 힘들다는 단점도 있습니다.... 😪

 

Bootstrap 적용해보기

src > main > webapp > WEB-INF > views > include라는 폴더를 생성하고,

style.jsp에 Bootstrap을 적용하기 위한 코드를 추가하도록 하겠습니다.

 

❗ 화면과 관련된 코드는 application.properties에 작성한 경로 내에 작성합니다!

#JSP경로 설정
#prefix : 경로, suffix : 확장자명
spring.mvc.view.prefix: /WEB-INF/views/
spring.mvc.view.suffix: .jsp

 저는 지정한 WEB-INF/views 경로 내에 작성하였습니다.

 

style.jsp에 필요한 코드를 확인하기 위해, Bootstrap 공식 사이트에 접속합니다. (https://getbootstrap.com/)

Docs > Download > Examples > CDN via jsDelivr 에 작성된 코드를 확인하고,

style.jsp에 코드를 추가합니다.

 

style.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<head>
<meta charset="UTF-8">
<title>INTELLIJ2's PROJECT</title>

    <!-- Bootstrap : CSS only -->
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
        crossorigin="anonymous">
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>

    <!-- Bootstrap : JavaScript Bundle with Popper -->
    <script
        src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
        integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
        crossorigin="anonymous"></script>

    <!-- JQuery -->	
    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js></script>

</head>

 

Bootstrap이 잘 적용되는지 확인하기 위해, 동일한 경로에 header.jsp와 footer.jsp를 작성하도록 하겠습니다.

Bootstrap 공식사이트에서 원하는 디자인의 코드를 복사하여 붙여넣으면 됩니다!

 

header.jsp

(페이지 상단에 보여질 네비게이션 바입니다😉)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<nav class="navbar navbar-expand-lg bg-body-tertiary"
		style="margin-bottom:20px">
	<div class="container-fluid">

		<a class="navbar-brand" href="#">INTELLIJ2</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
			data-bs-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link active"
					aria-current="page" href="/main">Home</a></li>
				<li class="nav-item"><a class="nav-link" href="/list">Board</a>
				</li>
				<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
				</li>
				<li class="nav-item"><a class="nav-link disabled">Disabled</a>
				</li>
			</ul>
		</div>
	</div>
	</nav>
</body>
</html>

 

footer.jsp

(페이지 하단에 보여질 글자입니다😣)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p style="position:absolute; bottom:0">Copyright 2023. INTELLIJ2 All rights reserved.<p>
</body>
</html>

 

작성한 header와 footer를 원하는 페이지에 적용해보도록 하겠습니다.

저는 WEB-INF > views > page > main.jsp 에 작성하겠습니다.

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@ include file="../include/style.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="../include/header.jsp"></jsp:include>
	<section>
		<p style="text-align: center; margin:1rem">INTELLIJ2's JSP-MyBatis Project😎</p>
		<p>${nickname}님 환영합니다.</p>
		<img src="resources/image/shooya.png"
			style="margin: auto; display: block">
	</section>
	<jsp:include page="../include/footer.jsp"></jsp:include>
</body>
</html>

style.jsp를 <%@ include file="../include/style.jsp"%> 코드로 import 해주고,

body 태그 안에는 

<jsp:include page="../include/header.jsp"></jsp:include>

<jsp:include page="../include/footer.jsp"></jsp:include> 

해당 코드로 header와 footer를 적용시켜줍니다.

 

여러 페이지에서 Bootstrap를 적용해야한다면, 적용하고자 하는 페이지마다 코드를 추가하여야 합니다😭

 

프로젝트를 실행하고 페이지를 확인해보면,

다음과 같이 header와 footer가 예쁘게(?) 추가된 모습을 확인하실 수 있습니다!😉

(저는 별도의 css 파일도 적용한 상태입니다.)

📚 다음 포스팅에서는 본격적으로 게시판 CRUD를 다루도록 하겠습니다!

 

저작자표시 비영리 변경금지

'✨LEVEL UP🎇 > PROJECT' 카테고리의 다른 글

[JSP + MyBatis] 6. 게시물 리스트 + JSTL  (1) 2023.03.06
[JSP + MyBatis] 5. 게시글 작성하기 (insert)  (1) 2023.02.07
[JSP + MyBatis] 3. MySQL DB 연동하기  (0) 2023.01.25
[JSP + MyBatis] 2. 프로젝트 세팅 및 화면 출력해보기  (0) 2023.01.25
[JSP + MyBatis] 1. 프로젝트 생성 및 실행해보기  (0) 2023.01.25
'✨LEVEL UP🎇/PROJECT' Related Articles more
Comments