이번 게시물에서는 블로그 게시판을 위한 홈페이지를 만들 기준이 되는 메인화면을 구성하려고 합니다.
HTML과 CSS를 잘 다루거나 또는 프론트엔드에서 사용하는 React, Vue.js 등으로 구성할 수 있지만 필자는 Bootstrap을 이용한 화면으로 디자인하려고 합니다.
부트스트랩은 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를 저기에 해당하는 곳이기 때문입니다.
여기에서 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 |