0.파일 구조
/src
├── Libraries
│ └── user
│ └── User.java
│ └── UserDAO.java
│ └── bbs
│ └── Bbs.java
│ └── BbsDAO.java
/src/main/webapp
├── META-INF
│ └── MANIFEST.MF
├── WEB-INF
│ └── web.xml
│ └── lib
├── css/
│ └── custom.css
├── fonts/
├── js/
├── images/
│ └── cat1.jpg
│ └── cat2.jpg
│ └── cat3.jpg
├── bbs.jsp
├── main.jsp
├── index.jsp
├── login.jsp
├── loginAction.jsp
├── logoutAction.jsp
├── join.jsp
├── joinAction.jsp
├── write.jsp
├── writeAction.jsp
├── view.jsp
├── update.jsp
├── updateAction.jsp
├── deleteAction.jsp
└── index.jsp1.메인 페이지 꾸미기와 글꼴 변경
custom.css
글꼴을 바꾸기 위해 추가할 코드입니다.
①webapp-css 에서 'New' - 'Css File' 클릭 - 'custom.css' 작성
②코드 구성
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
* {
font-family: 'Nanum Gothic';
}
h1 {
font-family: 'Hanna';
}
main.jsp에 소개 문구 추가 및 글꼴 CSS 적용
BootStrap을 적용했던 코드 아래에 추가로 삽입합니다.
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">*나머지 페이지를 표시하는 코드들에도 글꼴 CSS 파일 custom.css를 불러오도록 코드를 추가합니다.
jquery를 적용했던 <script> 태그 위에 코드를 추가합니다. 이 코드는 소개문구를 출력합니다.
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Introduce Website</h1>
<p>This web site is pretty simple. Really simple structure. But We include all of basic utility. Have a good day.</p>
<p><a class="btn btn-primary btn-pull" href="#" role="button">Contact us</a></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
main.jsp에 사진 추가
①webapp 에서 'New'- 'Folder' 클릭 - 'images' 작성
②원하는 3가지 사진 '드래그&드롭'으로 images로 원하는 사진 옮기기
③추가 코드 작성
jquery 스크립트 위, 소개 문구 아래에 해당 코드를 추가합니다. 이 코드는 BootStrap에서 제공하는 "Carousel"이라는 기능이며, 사진첩처럼 좌우로 사진을 넘길 수 있는 기능입니다.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/cat1.jpg">
</div>
<div class="item">
<img src="images/cat2.jpg">
</div>
<div class="item">
<img src="images/cat3.jpg">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
전체 코드(main.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<title>JSP Board</title>
</head>
<body>
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
%>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">JSP Board</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="main.jsp">Main</a>
<li><a href="bbs.jsp">Board</a>
</ul>
<%
if(userID == null) {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Access<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="login.jsp">Login</a></li>
<li><a href="join.jsp">Sign up</a></li>
</ul>
</li>
</ul>
<%
} else {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">My page<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logoutAction.jsp">Logout</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Introduce Website</h1>
<p>This web site is pretty simple. Really simple structure. But We include all of basic utility. Have a good day.</p>
<p><a class="btn btn-primary btn-pull" href="#" role="button">Contact us</a></p>
</div>
</div>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/cat1.jpg">
</div>
<div class="item">
<img src="images/cat2.jpg">
</div>
<div class="item">
<img src="images/cat3.jpg">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
'project > JSP+Oracle_DB+Apache_Tomcat' 카테고리의 다른 글
| [JSP/OracleDB/Tomcat/Eclipse]게시판 데이터 연동 (0) | 2025.03.11 |
|---|---|
| [JSP/OracleDB/Tomcat/Eclipse]글쓰기 기능 (0) | 2025.03.09 |
| [JSP/OracleDB/Tomcat/Eclipse]게시판 기능 (0) | 2025.03.05 |
| [JSP/OracleDB/Tomcat/Eclipse]세션 관리 (0) | 2025.03.04 |
| [JSP/OracleDB/Tomcat/Eclipse]Sign up 기능 (0) | 2025.02.28 |
