로그인 페이지 디자인

티스토리 뷰

JSP/MVC1 게시판 만들기

로그인 페이지 디자인

GrapeMilk 2020. 4. 13. 23:55

지난 시간에는

- 개발 환경설정

- index.jsp 생성 후 Hello World 출력

Goal

- 부트스트랩을 통해 로그인 페이지를 디자인한다

- 네이게이션을 구현한다.

- 로그인 양식을 작성한다.

index 페이지란?

- 홈페이지에 처음 접속했을 때 실행되는 홈페이지 ex) 네이버 메인 화면, 구글 메인 화면

1. 인덱스페이지에 접속하면 로그인 화면으로 이동시키기

- index.jsp 파일의 body 태그에 <script> 문장 삽입

- index.jsp에서 서버를 실행하면 login.jsp 화면을 띄워준다 (login.jsp파일이 만들어져있지 않으면 404오류를 띄움)

<body>
	<script>
		location.href = 'login.jsp';
	</script>
</body>

2. 기본적인 웹사이트틀 잡기

- 홈페이지를 만들때는 디자인을 먼저 입히고 기능을 만들어 주는 경우가 일반적이다.

1) EUC-KR을 UTF-8 로 바꾸기

- UTF-8 : 최근에 많이 사용되는 국제적인 인코딩 언어, 한글, 영어를 다 포함한 문자를 보여줌

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Web Site</title>
</head>
<body>
	<script>
		location.href = 'login.jsp';
	</script>
</body>
</html>

3. login.jsp 파일에 부트스트랩 적용하기

1) 디자인을 위해 부트스트랩 JSP에 설정하기

*3.3.7 버전 사용

부트스트랩 홈페이지 이동 -> css, JS, fonts 파일을 C\:JSP 폴더에 다운로드 후 압축 풀기 -> 압축이 풀린 폴더에 있는 CSS와 JS, fonts 폴더를 복사 -> 프로젝트의 WebContents 파일에 붙여 넣기

2) 반응형 웹에 사용되는 메타태그를 <head>안에 입력함

- 기본적으로 부트스트랩은 컴퓨터, 핸드폰 등 어떤 디바이스에 접속하더라도 해상도에 맞게 디자인이 변경되는 템플릿임

3) 스타일 시트를 참조하는 링크 작성

- css폴더의 bootstrap.css파일을 참조하겠다고 알리는 코드 작성

4) 애니메이션을 담당할 자바스크립트를 참조할 코드 작성

- jquery를 특정한 홈페이지에서 가져올 수 있게 함

- 부트스트랩에서 기본적으로 제공해주는 javascript파일 또한 코드로 넣어줌

<%@ 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"> <!--2) -->
<link rel="stylesheet" href="css/bootstrap.css"> <!--3) -->
<title>JSP Web Site</title>
</head> 
<body>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!--4) -->
	<script src="js/bootstrap.js"></script>
</body>
</html>

4. 네비게이션 구현하기

- 네비게이션 : 하나의 웹사이트에 전반적인 구성을 보여주는 것

1) header 구현하기

- header : 홈페이지의 로고같은 것을 담는 영역

- button을 만든다

- icon-bar : 맨 오른쪽의 하나의 작대기

- navbar-brand : 로고 같은 것을 의미

<body>
	<nav class="navbar navbar-default">
		<div class="navbar-header"> <!-- 여기서 부터 -->
			<button type="button" class="navbar-toggle collapsed"
			data-toggle="collapse" data-tartget="#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 Web Site</a>
		</div>
	</nav>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>

2) nav 구성요소 navbar 구현하기

- Main, Board 만들기

- dropdown 만들기

<body>
	<nav class="navbar navbar-default">
		<div class="navbar-header">
		<!-- ... -->
		</div>    
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- 여기서부터-->
			<ul class="nav navbar-nav">
				<li><a href="main.jsp">Main</a></li>
				<li><a href="bbs.jsp">Board</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">Login<span class="caret"></span></a>
				</li>
			</ul>
		</div>
	</nav>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>

3. dropdown-menu 구현

- Enter를 클릭할 경우 메뉴가 쭈루룩 나오게 하기

- active : 단 한개의 홈페이지에만 선택할 수 있으며 현재 선택이 되었다는 의미, 화면상에서는 현재 해당 페이지라면 파란색으로 글씨가 뜬다

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<!-- ... -->
				<li class="dropdown">
					<a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">Enter<span class="caret"></span></a>
					<ul class="dropdown-menu"> <!-- 여기서 부터 -->
						<li class="active"><a href="Login.jsp">Login</a></li>
						<li><a href="join.jsp">SignUp</a></li>
					</ul>
				</li>
			</ul>
		</div>

4. 로그인 양식 만들기

- post : 회원가입이나 로그인 처럼 정보를 숨기면서 보낼 수 있는 요청방식

- action : 해당 페이지로 정보를 보낸다

- text-align: center : 문장을 가운데 정렬

- placeholder : 값이 입력되지 않았을 때 화면에 보여지는 문구

- name : 서버프로그램을 작성할 때 사용되는 요소

<body>
	<nav class="navbar navbar-default">
		<!-- ... -->
	</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;">Welcome!</h3>
					<div class="form-group">
						<input type="text" class="form-control" placeholder="ID" name="userID" maxlength="20">
					</div>
					<div class="form-group">
						<input type="password" class="form-control" placeholder="Password" name="userPassword" maxlength="20">
					</div>
					<input type="submit" class="btn btn-primary form-control" value="Login">
				</form>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>

'JSP > MVC1 게시판 만들기' 카테고리의 다른 글

로그인 기능 구현하기 (0)	2020.04.14
회원 데이터베이스 구축하기 (0)	2020.04.14
개발 환경 설정, Hello World (0)	2020.04.13

최근에 올라온 글

최근에 달린 댓글

TAG more

Total

Today

Yesterday

Now or Never

티스토리 뷰