JSP무작정 해보기 - 게시판 만들기

이전 페이지처럼 기본 준비가 끝났다면 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 쪽을 제대로 공부해본적이 없어 잘은 모른다....)

(출처 :https://m.blog.naver.com/PostView.nhn?blogId=ksh81850&logNo=220423080597&proxyReferer=https%3A%2F%2Fwww.google.com%2F)

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까지 정할 수 있음)

h1 ~ h6까지 크기(출처 : http://bootstrapk.com/css/#forms)

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

JSP무작정 해보기 - 게시판 만들기 - Login.jsp