JSP 게시판 만들기 CHAPTER 14 (자바스크립트) - 웹 사이트 메인 페이지 디자인하기
- 코딩/Jsp
- 2019. 12. 25.
이제 마지막으로 main.jsp페이지를 디자인 및 페이지 소개를 해보도록 하겠습니다.
main.jsp 파일에 로그아웃 부분 아래에 </nav>
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>사이트 소개</h1>
<p>부트스트랩을 이용하여 만든 JSP 게시판 사이트 입니다.</p>
<p>
<a class="btn btn-primary btn-pull" href="#" role="button">자세히
알아보기</a>
</p>
</div>
</div>
</div>위와 같이 h1 태그를 이용하여 제목을 적고
<p>태그를 이용하여 글 내용을 입력 할 수 있게 해준다.
보여지는 화면
css 추가 사용
WebContent 우클릭 new -> other를 들어가 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에 적용 하여 보겠습니다.
main.jsp에 아까전에만든 custom.jsp참조 하기
main.jsp 에 title상단 부분에
<link rel="stylesheet" href="css/bootstrap.css">
이렇게 기본 부트스트랩 css가 적용 되어있는 것을 볼 수 있는데
이와 똑같이 <link rel="stylesheet" href="css/custom.css"> 기존에 만들어 두었던 css를 추가해 주도록 한다.
그럼 이렇게 폰트가 바뀐 것을 볼 수 있다.
홈페이지 이미지 추가하기
image라는 폴더 하나를 만들어 줍니다.
그리고 이미지를 넣어 줍니다.
그리고 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 게시판 웹사이트</title>
</head>
<body>
<%
//로긴한사람이라면 userID라는 변수에 해당 아이디가 담기고 그렇지 않으면 null값
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-expaned="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 게시판</a>
</div>
<div class="collapse navbar-collapse"
id="#bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="main.jsp">메인</a></li>
<li class="active"><a href="bbs.jsp">게시판</a></li>
</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">접속하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</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">회원관리<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logoutAction.jsp">로그아웃</a></li>
</ul></li>
</ul>
<%
}
%>
</div>
</nav>
<!-- 점보트론 메인 페이지 소개 -->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>사이트 소개</h1>
<p>부트스트랩을 이용하여 만든 JSP 게시판 사이트 입니다.</p>
<p>
<a class="btn btn-primary btn-pull" href="#" role="button">자세히
알아보기</a>
</p>
</div>
</div>
</div>
<div id="myCarousel" class="carousel" 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" class="active"></li>
<li data-target="myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg">
</div>
<div class="item">
<img src="images/2.jpg">
</div>
<div class="item">
<img src="images/3.jpg">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 부트스트랩 JS -->
<script src="js/bootstrap.js"></script>
</body>
</html>위와 같이 하여 1 , 2, 3 이미지를 캐러샐로 만들어 보았습니다.
깃허브에 코드를 업로드 해두었습니다.
https://github.com/ssj9398/BBSJSP/tree/master
ssj9398/BBSJSP
Contribute to ssj9398/BBSJSP development by creating an account on GitHub.
github.com
'코딩 > Jsp' 카테고리의 다른 글
| JSP 게시판 만들기 CHAPTER 1 (자바스크립트) - 개발환경 구성해주기 (0) | 2020.08.21 |
|---|---|
| [TOMCAT] Multiple Contexts have a path of 오류 해결 방법 (0) | 2020.03.10 |
| JSP 게시판 만들기 CHAPTER 13 (자바스크립트) - 게시글 수정 및 삭제 기능 구현하기 (0) | 2019.12.24 |
| JSP 게시판 만들기 CHAPTER 12 (자바스크립트) - 게시글 보기 기능 구현 (0) | 2019.12.18 |
| JSP 게시판 만들기 CHAPTER 11 (자바스크립트) - 글목록 구현하기 (0) | 2019.12.17 |