로그인 작업을하기위해 모든사람을 로그인 화면으로 이동시키는 해제 작업을 합니다.
로그인화면으로 이동시킵니다.
실행을하면 인덱스페이지가 찾을수 없다
login.jsp 파일이없기때문에
webcontent에 새로운 jsp 파일을 만듭니다.
그뒤에 index.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
jsp 폴더에 압축을 푼뒤
이렇게 복사 붙여넣기를 하게됩니다.
<meta name="viewport" content="width=device-width", initial-scale="1">
- 기본적으로 컴퓨터 휴대폰 알아서 디자인이 깔쌈하게
반응형 웹에사용되는 메타탭을 넣어주는거.
<link rel="stylesheet" href="css/bootstrap.css">
- 스타일시트를 참조하고 css폴더안에 bootstrap.css를 참조하겠다
이홈페이지에 기본적인 디자인으로 사용하겟다.
<script src="https://code.jquery.com/jquery-3.1.1.min,js"><script>
- 애니메이션을 담당하게될 j쿼리를 특정한 홈페이지에서 가져오도록한다.
<script src="js/bootstrap.js"></script>
- 부트스트랩에서 기본적으로 제공해주는 자바스크립트파일또한 넣어준다. 이폴더안에있는 js파일을 참조하겠다
현재까지 결과이다.
실행했을때 현재는 아직 오류가 없다.
<body> 안에 내용이없기때문에 내용이 없다
네비게이션은 하나의 웹사이트에 전반적인 구성을해주는 역하을 해줍니다.
div calss= 헤더부분을 만들어줍니다.
<button 버튼을 만들어줍니다.
data
<nav class="navbar navbar-default"> 클래스를 넣어줍니다.
<div class="navbar-header"> 헤더를 만들어줍니다.
<button type="button" class="navbar-toggle collapsed" 버튼을 만들어줍니다.
data-toggle="collapse" data-targer="#bs-example-navbar-collpse-1" 데이타토글은 콜렙스 에디터 타겟은 콜렙스-1
aria-expanded="false">
<span class="icon-bar"></span> 아이콘 바를 3개 넣어줍니다.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">JSP 게시판 웹사이트</a> 로고를 의미한다 brand
</div>
현재의 내용이다.
현재이렇게 나오게된다!
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div>
추가
꼭 위에 이름과 똑같은 내용을 넣어줘야한다!
<ul class="nav navbar-nav">
<li><a href="main.jsp">메인</a><li>
<li><a href="bbs.jsp">게시판</a><li>
</ul>
ul =리스트를 보여줄때 사용하는 것이
하나의 원소를 넣어준다 main.jsp로 이동하는 메인이라는 링크를 넣어주고
<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>
</span class="caret">이건 하나의 아이콘
중간 점검입니다.
이제는 메인 홈페이지가 생겼습니다!.
접속하기를 눌렀을때 밑에가 주르륵 나오게 만듭니다.
dropdown이 안되서 몇시간동안고민하다가 드디어 찾은이유....
js딴거썼다..
성공 이제 다음거
로그인양식 만들기
div class="container">
- 감싸기 하나의 컨테이너로
<div class="col-lig-4"></div>
<div class="col-lig-4">
0--------------중간에 로그인양식이들어간다.
<div class="jumbotron" style="padding-top; 20px;">
점보트론 넣기
<form method="post" action="loginAcion.jsp">
양식 넣기 폼 회원가입이나 로그인의 정보를 숨기면서 보내기위해서
<h3 style="text-align; center;"> 로그인 화면</h3>
텍스트 얼라인은 센터로해서 하나의 문장을 가운데정렬시키도록 한다.
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
어떤한 정보를 넣어주는데
placeholder는 현재 어떠한 것도 입력하지않았을떄 나오는 이름을 정하기위해서 사용
name은 대소문자 구분 꼭하기
글자 길어지지않게 20자 제한
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>
반드시 유저id와 userpassword는 꼭 대소문자 유의
<input type="submit" class="btn btn-primary form-control value="로그인">
타입을 submin 버튼 프라이머리로 폼 컨트롤이라놓고
로그인버튼을알려주는 value를 넣는다.
</form>
</div>
</div>
----------------------------
<div class="col-lig-4"></div>
마지막 코드./....
현재 로그인 화면까지 깔끔하게 만들엇다 !
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>taktak's house</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">탁탁이의 하우스</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-lig-4"></div>
<div class="col-lig-4">
<div class="jumbotron" style="padding-top; 20px;">
<form method="post" action="loginAcion.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-lig-4"></div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>