Spring

[유튜브-메타코딩] - 나만의 블로그 만들기 - 9. 화면구현(부트스트랩)

그라가승훈 2022. 8. 16. 10:46

- Bootstrap을 이용한 화면 구현

  • 트위터의 Bootstrap, 구글의 Material CSS를 사용하면 화면을 쉽게 구현할 수 있다.
  • 부트스트랩
 

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

  • Material CSS
 

Getting Started - Materialize

Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.

materializecss.com

- Navigation Bar

  • Navbar 클릭 후 맘에 드는 코드 선택하여 가져오기

  • Bootstrap으로 가져온 Collapsing The Navigation Bar 코드
<!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>

- Footer

1.Basic Template에 Demo를 클릭

2. 개발자 모드 검사로 소스코드를 복사하여 붙여 넣는다.

  • 가져온 Footer 코드
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

- Header와 Footer를 모든 화면에 적용시키기 위한 템플릿 구현

모든 화면에 있어야할 Header와 Footer를 모든 파일에 작성하지 않고 따로 파일을 만들어 Include하여 사용한다.

 

1. header와 footer 파일을 layout 폴더에 따로 만든다.

2. 각 Header와 Footer 부분만 잘라서 넣어준다.

 

3. Include 를 넣어 파일 경로를 설정해주면 적용된다.

- 게시글 카드 화면

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

- 로그인, 회원가입 화면

  • 두 화면의 Form은 비슷하므로 부트스트랩에서 하나의 폼으로 살짝 식 수정만 한다.
<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

 

- Controller를 생성하여 화면 이동을 위한 GetMapping

  • Yaml파일로 경로를 설정해준 것을 확인하여 url 경로 설정.

  • Navigation Bar에 메뉴 경로 설정
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
		<a class="navbar-brand" href="/blog">Home</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="/blog/user/loginForm">Login</a></li>
				<li class="nav-item"><a class="nav-link" href="/blog/user/joinForm">Sign up</a></li>
			</ul>
		</div>
	</nav>
  • BoardController를 생성하여 홈 화면을 응답하는 메서드 생성
@Controller
public class BoardController {
	
	// http://localhost:8000/blog
	@GetMapping("/")
	public String index() {
		
		// yml파일로 경로를 설정해서  /WEB-INF/views/index.jsp 으로 이동
		return "index";
	}
}
  • UserController를 생성하여 로그인, 회원가입 화면을 응답하는 메서드 생성
@Controller
public class UserController {

	// http://localhost:8000/blog/user/joinForm
	@GetMapping("/user/joinForm")
	public String joinForm() {
		
		// /WEB-INF/views/user/joinForm.jsp
		return "user/joinForm";
	}
	
	// http://localhost:8000/blog/user/loginForm
	@GetMapping("/user/loginForm")
	public String loginForm() {
		
		// WEB-INF/views/user/loginForm.jsp
		return "user/loginForm";
	}

}