bootstrap 사용
- 위 사이트 이동 후 bootstrap 메뉴 이동 - bootstrap4 클릭
- 사이드메뉴에 Navbar 선택 후 Collapsing The Navigation Bar 소스를 사용.
- 사이드메뉴 BS4 Basic Template의 foot 소스 사용
- 사이드메뉴 BS4 Cards의 소스 사용
index.jsp
<!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.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.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>
</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>
- 위 코드를 전부 복사하여 사용
- index.jsp 파일을 생성해주고
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>junhoBlog</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.7.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>
<script src="https://kit.fontawesome.com/64c1de1f17.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">junho</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/loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/user/joinForm">회원가입</a></li>
</ul>
</div>
</nav>
<br>
<div class="container">
<div class="card m-3" style="">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width: 100%">
<div class="card-body">
<h4 class="card-title">제목 파트</h4>
<p class="card-text">내용 파트</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card m-3" style="">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width: 100%">
<div class="card-body">
<h4 class="card-title">제목 파트</h4>
<p class="card-text">내용 파트</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card m-3" style="">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width: 100%">
<div class="card-body">
<h4 class="card-title">제목 파트</h4>
<p class="card-text">내용 파트</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>
<i class="fa-solid fa-user"></i></i>Created by junho
</p>
<p>
<i class="fa-regular fa-address-book"></i></i>010-8888-8888
</p>
<p>
<i class="fa-solid fa-house"></i></i>서울특별시 XX구
</p>
</div>
</body>
</html>
- jsp 파일 메인 페이지로 활용.
- m-3 클래스를 추가하면 1rem 마진을 부여하게 됩니다.
- index.jsp 파일을 생성한 위치로 이동하기 위한 controller 생성
- 간단한 메인페이지를 생성할 수 있습니다
user 화면 생성 (로그인, 회원가입)
- BS4 Forms - 원하는 소스 사용 (저는 기본 사용했습니다.)
- 폴더 구성을 반복되는 부분을 따로 빼주는 방식으로 구성하였고, 헤더와 풋터를 분리하여 layout 폴더에 넣어주고 jsp include 함수를 사용하여 불러와 사용했습니다.
Font awesome 이모티콘 활용
폰트 어썸 사이트에서 자바스크립트 키를 발급 받고 Free버전의 이모티콘을 사용하면 됩니다.
이클립스 자동정렬 설정
- 라인의 길이 길어지면 밑으로 넘어가는 현상이 발생하는 걸 방지하기 위해 라인의 길이를 72->200으로 늘렸습니다.
변화를 두려워하는 사람이 가장 불행한 사람이다.