https://www.youtube.com/watch?v=MtxFWczSFqU&list=PLRx0vPvlEmdAZv_okJzox5wj2gG_fNh_6&index=2
1. index.jsp 수정
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<script>
location.href = 'login.jsp';
</script>
</body>
</html>
2. login.jsp 생성 / 부트스트랩 설치
https://getbootstrap.com/docs/3.3/
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Preprocessors Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. Full of features With Bootstrap, you get extensive and beau
getbootstrap.com
부트스트랩 최신버전이 따로 있지만 동빈나님이 사용한 부트스랩버전 그대로 사용
webapp폴더에 css, fonts, js 폴더 넣기 (복사 붙여넣기 하면 들어감)
login.jsp (강의2 이후에도 작성된 코드라 조금 다를 수 있음)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<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 게시판 웹 사이트</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><a href="bbs.jsp">게시판</a></li>
</ul>
<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 class="active"><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="padding-top: 20px;">
<form method="post" action="loginAction.jsp">
<h3 style="text-align: center;">로그인 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control" value="로그인">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
'JSP > JSP게시판 만들기' 카테고리의 다른 글
| JSP 게시판 만들기 / 회원가입 기능 구현하기 [동빈나님 강의.6] (0) | 2021.09.28 |
|---|---|
| JSP 게시판 만들기 / 회원가입 페이지 디자인 [동빈나님 강의.5] (0) | 2021.09.27 |
| JSP 게시판 만들기 / 로그인 기능 구현 [동빈나님 강의.4] (0) | 2021.09.27 |
| JSP 게시판 만들기 / 회원 데이터베이스 구축 [동빈나님 강의.3] (0) | 2021.09.27 |
| JSP 게시판 만들기 / 개발환경 설정 [동빈나님 강의.1] (2) | 2021.09.27 |