이전 페이지처럼 기본 준비가 끝났다면 WebContent 폴더를 오른쪽 마우스를 누른 후 New를 누른 뒤 JSP File을 선택하여 JSP 파일을 선택한다.
그 후 File name에다가 Login.jsp라고 한 후 파일을 생성한다.
파일을 생성하면
다음과 같이 나오는데 수정해주어야 할게 몇 개 있다.
<%@ 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">다음과 같이 Charset과 pageEncoding 부분은 UTF-8로 바꿔준다.
이유는 UTF-8이 국제적인 코딩언어인데, 한글, 영어 둘 다 보여주는 인코딩 언어이기 때문에 많이 사용한다.
다음과 같이 코드를 적어준다.
기기에 따라 크기 맞춰주기
<meta name = "viewport" content="width=device-width", inital-scale="1">다음 코드는 반응형 웹사이트를 위해 적어주는 코드인데 반응형 웹사이트는 휴대폰이나 태블릿 경우 브라우저 크기를 변경할 수 없는 경우가 많은데 그때 크기를 자동으로 바뀌어주는 코드이다.
viewport는 웹페이지가 사용자에게 보여지는 영역이다.
그 후 width = device-width를 해주는데 넓이를 기기의 크기에 맞춘다는 뜻이다.
마지막으로 initial-scale="1"은 초기 화면 배율을 1로 설정해준다는 뜻이다.
CSS 적용하기
다음과 같이 크기를 맞춰주면 다음으로 할 일은 CSS를 적용하는 것이다.
CSS 적용하기 위해 다음과 같이 코드를 작성해준다.
<link rel="stylesheet" href="css/bootstrap.css">이제 다음과 같이 코드를 작성하면 기본적인 준비가 끝난다.
<헤드 코드>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!-- 위의 페이지 : 페이지 인코딩 하는 부분, UTF-8을 사용하는 이유 : 국제적인 코딩언어, 한글 영어 둘다 보여주는 인코딩 언어 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-type" content = "text/html"; charset="UTF-8">
<meta name = "viewport" content="width=device-width", inital-scale="1"> <!-- 반응형 웹사이트 적용을 위해 8번 줄을 적어줘야함 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 다운받은 css 적용을 하겠다고 알려줌 -->
<title>로그인 페이지</title>
</head>
<body>
</body>
<script src="https://code.jquery,com/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.js"></script>다음과 같이 헤드 부분 작성이 완료되면 이제 화면에 보여줄 <body> 부분을 작성해야 한다.
navbar 만들기
게시판들을 보면 맨위에 버튼이 있다.
다음과 같은 navbar를 만들어보자
<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-expended="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>다음 코드를 해석해보면
<nav class="navbar navbar-default>를 통해서 기본적인 네비게이션 바를 만든다.
<button type~> 이 쪽을 보면 collapse라는 것이 있는데 collapse는 클릭 시 해당 내용이 펼쳐지고 다른 내용은 접히는 특수효과이다.
data-target="#bs-example ~는 버튼 클릭시 모달로 띄우고자 하는 id값을 #으로 붙여서 연결해준다.
aria-expended="false"는 웹 접근성 측면에서 열린 부분은 true, 닫힌 부분은 false라고 한다.(web 쪽을 제대로 공부해본적이 없어 잘은 모른다....)
Bootstrap의 Collapse( 컬랩스 )
※ Collapse ( 컬랩스 ) ☞ 제목 클릭하면 해당 내용이 펼쳐지고, 다른내용은 접히는 특수한 효과를 의미...
blog.naver.com
메뉴바? 만들기
메뉴바?를 만들어보자
머라 설명을 해야할지 모르겠어서 먼저 그림으로 보여주겠다.
저기 동그라미 친것인데 만약 화면이 최대 크기가 아닐 경우 저 버튼을 눌러 메뉴를 선택하게 해주는 버튼이다.
동그라미 친 것을 보면 줄이 3개인데 저 3개의 줄을 만들기 위해서는 다음과 같이 코드를 작성해준다.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>만약 저 코드가 하나이면 짝대기가 하나일 것이고 2개이면 2개일 것이다.
특별히 부각하고 싶은 메뉴 만들기
제목만 보면 무엇을 만드는지 모를 것이다. 그래서 그림으로 먼저 보여주겠다.
navbar를 보면 T모양처럼 특별히 부각하고 싶은 메뉴인데 저 메뉴를 만들어 보겠다.
<a class="navbar-brand" href="main.jsp">jsp 연습</a>부각을 하고 싶은 메뉴를 만들려면 "navbar-brand"를 사용하면 된다.
나 같은 경우, jsp 연습을 부각 메뉴로 만들었고 만약 저 버튼을 누르게 된다면 main.jsp로 연결시켜주도록(a href="main.jsp")했다.
메뉴바 안에 메뉴 집어넣기
다음으로는 메뉴바 안에 메뉴를 집어넣어 보기로 했다.
메뉴바에 보면 피드, 스토리, 스킨, 포럼처럼 하위 메뉴를 보여주는 코드를 작성해 보자
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href = "Index.jsp">메인</a></li>
<li><a href = "practice.jsp">게시판</a></li>
<li><a href = "http://tkdrms568.tistory.com">블로그 이동</a></li>
</ul>ul 명령어는 순서가 없는 목록으로써 목록을 만드는 명령어다.
그 후 li 명령어는 목록의 내용이 되는 실질적인 태그이다.
다음과 같이 작성을 하게 되면
다음과 같이 메뉴가 만들어지게 되고 각각 메뉴를 누르게 되면 해당 페이지로 연결이 된다.
밑으로 내려오는 메뉴바 만들기
<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><!-- default로 적용되는 것은 로그인 -->
<li><a href="Join.jsp">회원가입</a></li><!-- dropmenu 2 -->
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li><!-- dropmenu 3 -->
</ul>
</li>
</ul>
이번 코드는 작성할까 말까 많이 고민했다. 왜냐면 코드는 작성했지만 내 페이지에서 동작하지 않기 때문이다.
그래도 혹시나 다른 사람들은 될 수도 있을 것 같아서 작성한다.
다음 코드는 접속하기를 누르면 아래로 메뉴가 나오는 코드이다.
아래로 나오는 메뉴는 <ul>과 <li> 태그로 정의해두었다.
우선 <ul> 태그는 순서가 없는 목록을 의미하고 <li> 태그는 <ul> 태그 밑에 하위 메뉴를 만들 때 사용을 한다.
<li class="active">는 메뉴가 아래로 내려가면 선택(active)되는 메뉴이다.
다음 코드를 해석하면 접속하기를 누르면 메뉴가 내려오는데 메뉴 안에는 로그인, 회원가입, 내 블로그 이동하기 3개가 있다.
<span class="caret">은 동그라미 친 부분을 표현해준다.
로그인 화면 창 만들기
다음으로 로그인 창을 만들어 보겠다.
<div class="container">
<div class="col-lg-10"></div>
<div class="col-lg-10">
<div class="jumbotron" style="padding-top:10px;">
<form method="post" action="Loginaction.jsp">
<h3 style="text-align: center;">로그인화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="ID" name = "userID" maxlength = "20">
</div><!-- id 창 만들기 form-control을 사용하므로 Bootstrap 자체만의 스타일로 컨트롤이 표시됨 -->
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name = "userPassword" maxlength = "20">
</div>
<input type="submit" class="btn btn-warning form-control" value="로그인">
</form>
</div>
</div>우선 코드는 다음과 같다.
container 클래스는 콘텐츠를 감싸는 클래스이다.
container 클래스는 일반 container와 fluid class가 있다.
1. container
container 클래스는 반응형으로 크기를 디바이스 크기에 맞춰서 제공한다.
2. fluid-container
fluid-container 클래스는 레이아웃 최대 크기로 제공한다.
보기 좋게 하기 위해 conatiner 클래스를 사용하기로 했다.
우선 로그인 페이지를 보면 로그인 입력창과 패스워드 입력창이 하나의 박스 안에 있기 때문에 container 클래스를 사용하였다.
그 후 col-lg-숫자 클래스를 사용하였는데 col-lg는 매우 큰 기기의 데스크톱에서 보여줄 때 사용한다고 한다.
그리드 옵션 종류
1. col-xs(모바일폰, 컨테이너 너비 = auto)
2. col-sm(태블릿, 컨테이너 너비 = 750px)
3. col-md(데스크톱, 컨테이너 너비 = 970px)
4. col-lg(큰 기기 데스크탑, 컨테이너 너비 = 1170px)
<div class="jumbotron" style="padding-top: 10px;>
jumbotron이란 네모난 회색 박스를 의미한다.
그리고 'padding-top 10px'는 네모난 회색 박스의 위에 부분에서 얼마나 빈칸을 줄 것인가 이다.
1. padding-top : 10px
2. padding- top : 40px
이런 느낌이다.
<form method="post" action = "Login.jsp">
1. form method = "post" -> post 방식으로 데이터를 보내겠다.(URL에 변수를 보여주지 않고 보내겠다.)
2. action = "Login.jsp" -> 데이터를 Login.jsp로 보내겠다.
<h3 style="text-align: center;"> 로그인 화면 </h3>
1. <h3> -> 로그인 화면 글자의 크기를 결정(h1 ~h6까지 정할 수 있음)
2. style ="text-align : center;" -> 로그인 화면을 가운데 정렬하겠다.
<input type="text" class = "form-control" placeholder="ID" name = "userID" max-length = "20">
1. input type = "text" ->텍스트 창을 만들어 준다.
2. class = " form-control" -> form-control을 사용하므로 Bootstrap 자체만의 스타일로 컨트롤이 표시된다.
3. placeholder = "ID" -> 텍스트 창에 default로 적혀있는 값
4. name = "userID" -> 데이터를 보낼 때 보내는 변수
5. max-length = "20" -> ID라는 텍스트 창에 최대로 쓸 수 있는 길이
<input type="password" class = "form-control" placeholder="비밀번호" name = "userPassword" max-length = "20">
1. input type = "password" -> 패스워드 입력창, 값을 입력하면 값이 안 보이게 해 줌
<input type = "submit" class= btn btn-warning form-control" value = "로그인">
1. input type = "submit" : 데이터를 Login.jsp로 보내는 담당
2. class = btn btn-warning form- control : button 만들기('btn-' 뒤에 본인이 원하는 스타일 선택)
3. value = "로그인" : 버튼의 입력값
이렇게 입력하면 다음과 같은 로그인 창이 만들어진다.
최대한 빨리 접속하기 버튼 부분 수정하도록 하겠다.
'JSP' 카테고리의 다른 글
| JSP 무작정 해보기 - 로그아웃 페이지, 메인 페이지 틀 잡기 (1) | 2019.11.05 |
|---|---|
| JSP 무작정 해보기 - 사용자에게 세션 부여하기 (0) | 2019.11.05 |
| JSP 무작정 해보기 - 회원가입 (0) | 2019.11.05 |
| JSP무작정 해보기 - 게시판 만들기 - DB 만들기, DB 연동, 로그인 함수 (0) | 2019.11.03 |
| JSP로 게시판 만들기 - 기본준비 (0) | 2019.10.31 |
