스프링부트 블로그 만들기 – 2강 디자인 작업
디자인 작업
src/main/webapp/WEB-INF/views/user
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container p-4 w-25 bg-light rounded shadow">
<h5 style="font-family: 'IBM Plex Sans KR', sans-serif; margin-bottom: 30px;">회원가입</h5>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter username" required="required" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password" required="required" maxlength="20">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary col-md-4" style="margin-top: 30px;">회원가입</button>
</form>
</div>
<%@ include file="../layout/footer.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container p-4 w-25 bg-light rounded shadow">
<h5 style="font-family: 'IBM Plex Sans KR', sans-serif; margin-bottom: 30px;">로그인</h5>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password" id="pwd" >
</div>
<button type="submit" class="btn btn-primary col-md-4" style="margin-top: 30px;">로그인</button>
</form>
</div>
<%@ include file="../layout/footer.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container p-4 w-25 bg-light rounded shadow">
<h5 style="font-family: 'IBM Plex Sans KR', sans-serif; margin-bottom: 30px;">회원정보</h5>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter username" required="required" maxlength="20" readonly="readonly">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password" required="required" maxlength="20">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary col-md-4" style="margin-top: 30px;">회원정보수정</button>
</form>
</div>
<%@ include file="../layout/footer.jsp"%>
src/main/webapp/WEB-INF/views/board
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../layout/header.jsp"%> <div class="container"> <a href="#" class="btn btn-warning">수정</a> <form action="#" method="post" style="display:inline-block"> <button id="btn-delete" class="btn btn-danger" type="submit">삭제</button> </form> <br /><br /> <div> 글 번호 : 1</span> 작성자 : <span><i>홍길동 </i></span> </div> <br /> <div> <h3>글 제목입니다.</h3> </div> <hr /> <div> <div>글 내용입니다.</div> </div> <hr /> <div class="card"> <form> <div class="card-body"> <textarea id="reply-content" class="form-control" rows="1"></textarea> </div> <div class="card-footer"> <button type="button" id="btn-reply-save" class="btn btn-primary">등록</button> </div> </form> </div> <br /> <div class="card"> <div class="card-header"><b>댓글 리스트</b></div> <ul id="reply-box" class="list-group"> <li id="reply-1" class="list-group-item d-flex justify-content-between"> <div>댓글입니다</div> <div class="d-flex"> <div class="font-italic">작성자 : 홍길동 </div> <button class="badge">삭제</button> </div> </li> </ul> </div> <br/> </div> <%@ include file="../layout/footer.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../layout/header.jsp"%> <div class="container"> <!-- 카드 글 시작 --> <div class="card"> <div class="card-body"> <!-- el표현식은 변수명을 적으면 자동으로 get함수를 호출해준다 --> <h4 class="card-title">글 제목입니다.</h4> <a href="/board/1" class="btn btn-primary">상세보기</a> </div> </div> <br /> <!-- 카드 글 끝 --> </div> <%@ include file="../layout/footer.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container p-4 w-70 rounded shadow">
<h5 style="font-family: 'IBM Plex Sans KR', sans-serif; margin-bottom: 30px;">글쓰기</h5>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter title">
</div>
<div class="form-group">
<textarea id="summernote" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary col-md-4" style="margin-top: 30px;">글쓰기</button>
</form>
</div>
<script>
$('#summernote').summernote({
height:350
});
</script>
<%@ include file="../layout/footer.jsp"%>
src/main/webapp/WEB-INF/layout
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&family=Jua&display=swap" rel="stylesheet">
</head>
<body>
<!-- 네브바 시작 -->
<nav class="navbar navbar-expand-md navbar-dark bg-info" style="margin-bottom:100px;">
<div
class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴5</a></li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/" style="font-family: 'Jua', sans-serif;">그린블로그</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/joinForm">회원가입</a></li>
</ul>
</div>
</nav>
<!-- 네브바 끝 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="jumbotron text-center" style="margin-top:200px;">
<p>그린컴퍼니</p>
<p>☎️010-1234-5678</p>
<p>?부산광역시 해운대구</p>
<p>?사업자번호 : 022-1234-3543</p>
</div>
</body>
</html>
layout 폴더에는 include할 파일을 넣어주세요.
CDN(Content Delivery Network service : 컨텐츠 전송 네트워크)
프로토콜의 공유 규모가 거대해지는 컨텐츠를 지역에서만 국한하지 않고 각지에 거점을 두어 가장 가까운 것을 사용하는 것으로 내 컴퓨터에 데이터를 보유하고 있지 않아도 되기 때문에 서버에 부하를 줄일 수 있다. ex)부트스트랩, 넷플릭스
