이번 게시물에서는 블로그 게시판을 위한 홈페이지를 만들 기준이 되는 메인화면을 구성하려고 합니다.
HTML과 CSS를 잘 다루거나 또는 프론트엔드에서 사용하는 React, Vue.js 등으로 구성할 수 있지만 필자는 Bootstrap을 이용한 화면으로 디자인하려고 합니다.
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
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
부트스트랩은 4, 5 이렇게 링크가 2개가 있는데 필자는 4를 사용하겠습니다.
먼저 메인 화면을 보여주기 위한 MainController 클래스 파일을 추가합니다.
[MainController]
@Controller
public class MainController {
@GetMapping("/main")
public String main() {
return "main";
}
}
그리고 resources/templates 폴더 안에 views를 생성하고 그 안에 main.html을 생성시킵니다.
왜 저렇게 생성을 하냐? 라고 물으신다면
전에 application.properties에서 타임리프로 출력하는 HTML파일들의 위치인 prefix를 저기에 해당하는 곳이기 때문입니다.
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
여기에서 Bootstrap의 전체 템플릿을 갖고옵니다. main.html에 try it youself 로 들어간 웹 페이지 안에 html 관련 파일들을 전부 복사하여 붙어넣습니다.
[main.html]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Website 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.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/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.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
[Bootstrap Body]...
</body>
</html>
정상적으로 main URL에 맞게 출력된 것을 확인하실 수 있습니다. 여기에서 NavBar 라는 헤더 바로 밑에 Link 3가지로 구성이 되어있는 줄이 있는데 여기에서 로그인/회원가입 등 표시를 하도록 하겠습니다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">메인페이지</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="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
</ul>
</div>
</nav>
이후에 Bootstrap의 Document를 확인하면서 Container, Header, Footer 등 디자인을 처리하면 됩니다.
'개발 > 프로젝트' 카테고리의 다른 글
| [스프링부트 게시판] 14. 로그인, 회원가입 화면 만들기 (1) | 2023.01.21 |
|---|---|
| [스프링부트 게시판] 13. 페이지 공통 부분 분리 (0) | 2023.01.20 |
| [스프링부트 게시판] 11. JPA DELETE (0) | 2023.01.18 |
| [스프링부트 게시판] 10. JPA UPDATE (0) | 2023.01.17 |
| [스프링부트 게시판] 9. JPA SELECT (0) | 2023.01.17 |
