https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Bootstrap 4 Navigation Bar
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
https://www.w3schools.com/bootstrap4/bootstrap_templates.asp
Bootstrap 4 Templates
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
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="layout/header.jsp" %>
<div class="container">
<div class="card m-3">
<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-3">
<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-3">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<p class="card-text">내용 적는 부분</p>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</div>
<%@ include file="layout/footer.jsp" %>header.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.5.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.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/">Pure</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="/user/login">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/user/join">회원가입</a></li>
</ul>
</div>
</nav>
<br>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<br>
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>Created by Pure</p>
<p>📞010-1234-5678</p>
<p>🚩마포구 서교동 Pure 개발연구소</p>
</div>
</body>
</html>
BoardController
package com.pure.blog.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class BoardController {
@GetMapping({"","/"})
public String index() {
return "index";
}
}
**IntelliJ 키맵을 풀었다. Format이 Ctrl + Alt + L로 지정이 되어있는데 작동을 제대로 안한다.
다시 이클립스 키맵으로 돌아와서 Ctrl + Shift + F 하니 잘 된다.
'취업 준비 > Spring boot' 카테고리의 다른 글
| 22. DB 격리 수준 (0) | 2022.01.26 |
|---|---|
| 21. 로그인, 회원가입 만들기 (0) | 2022.01.25 |
| 19. 스프링 기본 파싱전략과 JSON 통신 (0) | 2022.01.25 |
| 18. 예외처리 컨트롤러 만들기 (0) | 2022.01.24 |
| 17. Delete 테스트 (0) | 2022.01.24 |
