우선 ui를 구현하기 위해 부트스트랩을 사용하겠다.
https://www.w3schools.com/bootstrap4/default.asp
Bootstrap 4 Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이 곳에 들어가서
왼쪽 메뉴에서 Navbar를 클릭하고
여러 Navbar들 중에서 마음에 드는 것을 골라 Example에서
Try it Yourself 버튼을 눌러 안에서 코드를 복사한다.
STS로 돌아가 다음 폴더 안에 index.jsp 를 만든다.
index.jsp는 메인화면 페이지가 될 것이다.
index.jsp에 아까 복사했던 Navbar의 코드를 붙여넣는다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
그리고 controller 패키지와 UserController, BoardController 클래스를 생성한다.
BoardController.java
실행결과 :
/WEB-INF/views/index.jsp 가 정상적으로 리턴된 것을 확인할 수 있다.
이제 이 페이지에서 저 글들을 날리고 메뉴를 수정해보자
여기서 로그인, 회원가입 주소도 index.jsp에서 미리 만들어두자
이제 이 index.jsp(메인화면)에 footer를 만들어보자
Demo를 눌러 Footer에서 우클릭-검사를 클릭한다.
Copy > Copy element를 눌러 요소를 복사한다.
실행결과 :
지금은 올라가 있지만 어차피 나중에 내려갈 것이기 때문에 신경 안써도 된다.
Footer란 글자를 수정해보자
글자만 넣기는 심심하니까 터치 키보드에서 이모지를 꺼내서 써보자
실행결과 :
블로그니까 이제 메인페이지에서 글들이 표시되어야 한다.
테이블말고 카드를 이용해 이것을 표현해보자
해당 코드를 복사 후
컨테이너 안에 붙여넣는다.
Window-Preferences에서 Keys가 Default가 되어있는지 확인하고
index.jsp로 돌아와 ctrl+shift+f 를 누르면 이렇게 깔끔하게 정렬이 된다.
그리고 해당 설정을 통해 짧은 라인들이 내려오지 않게 Line width를 200정도로 조절한다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/blog">daramG</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<!-- #collapsibleNavbar는 화면이 줄어들었을 때 반응형으로 메뉴바 나타내게 해줌-->
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/user/login">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/user/join">회원가입</a></li>
</ul>
</div>
</nav>
<br>
<div class="container">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목을 적는 부분</h4>
<p class="card-text">내용을 적는 부분</p>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목을 적는 부분</h4>
<p class="card-text">내용을 적는 부분</p>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목을 적는 부분</h4>
<p class="card-text">내용을 적는 부분</p>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>🖊Created by daramG</p>
<p>📞010-0000-0000</p>
<p>🔰다람쥐대대 2중대 3소대</p>
</div>
</body>
</html>
실행결과 :
참고자료 :
'자바 스프링 > 부트 블로그 JPA 프로젝트' 카테고리의 다른 글
| #17 회원가입을 위한 세팅(+jQuery, Ajax) (0) | 2022.05.09 |
|---|---|
| #16 로그인, 회원가입 화면 만들기 (0) | 2022.05.08 |
| #14 delete 테스트, Exception 처리하기 (0) | 2022.05.07 |
| #13 update 테스트 (0) | 2022.05.07 |
| #12 select 테스트 및 페이징 (0) | 2022.05.06 |
