스프링부트 블로그 만들기 - 2강 디자인 작업Saichoiblog

스프링부트 블로그 만들기 – 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">작성자 : 홍길동 &nbsp;</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)부트스트랩, 넷플릭스