[JSP] 2강 - 부트스트랩을 이용한 로그인 화면 만들기

본 포스팅은

정보 제공용이 아닌

유튜브 동빈나님의 JSP 게시판 만들기 강좌 2강을

바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.

 

---

 

** 예전 학원 다닐 때 썼던 부트스트랩을 오랜만에 써보았다. 그 때는 부트스트랩3을 썼는데 벌써 그 사이에 5버전이 나온 걸 보니 내가 많이 늦은 건 아닌지 걱정이 되지만 제대로 이해하지 못하고 따라가기 급급했던 그 때와 지금은 많이 다를테고 또 많이 달라지도록 하루 하루 더 노력하길 다짐해본 시간이었다.

 

---

** 부트스트랩 준비

• 부트스트랩 공식 홈페이지에서 부트스트랩을 다운받는다.

시작하기 · 부트스트랩

• 압축파일로 되어있는데 css, fonts, js 폴더를 복사하여 이클립스 프로젝트 익스플로러 상에서 WebContent에 넣어준다.

---

 

** 화면 만들기(부트스트랩 준비)

• 다운을 받았으면 이제 본격적인 화면을 만들어야한다.
• JSP에 부트스트랩의 css, js, font 적용하기.

<!--  부트스트랩은 디바이스의 해상도에 맞게 맞게 변경되는 템플릿임. 반응형 웹의 메타 태그 -->
<meta name = "viewport" content="width=device-width", initial-scale="1">
<!-- css를 참조하는 링크. bootstrap.css 경로를 링크한다.-->
<link rel="stylesheet" href="css/bootstrap.css">



<!-- Jquery를 해당 주소에서 가져와 사용할 수 있게 해주는 스크립트  -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 해당 경로의 부스트스트랩의 자바스크립트를 사용하게 해주는 스크립트 -->
<script src="js/bootstrap.js"></script>

• 메타 태그와 css 참조링크는 jsp의 head 안에, jquery와 자바스크립트 사용 스크립트는 body 제일 아래쪽에 넣어줬다.
• 정해진 위치가 있나 싶어 각각 jsp 여기저기 넣어봤는데 잘 작동, 적용되는 거 보면 위치는 중요한 것은 아닌듯 하다.

---

 

 

**  네비게이션 바 만들기

• 이제 이 JSP에는 부트스트랩의 css, js, font 적용되어있다.
• 화면 상단에 네비게이션 바를 만들어보자.

	<!-- 네비게이션 바 -->
	<nav class="navbar navbar-default">
		<div class="navbar-header">
			<!-- 햄버거 버튼 큰화면에서는 x 좁은 화면에서는 o -->
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<!-- 햄버거의 갯수. 3개라서 3개. 1개면 1개 -->
				<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">
						<!-- active는 햄버거를 눌렀을 때 활성화 색이 보이게 함 -->
						<li class="active"><a href="login.jsp">로그인</a></li> 
						<li><a href="join.jsp">회원가입</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>

• 각 태그 클래스에 어떤 css와 js가 적용되고 동작하는지는 bootstrap.css에 bootstrap.js에 담겨있을 것이다.
• 이 강좌는 JSP와 웹사이트의 게시판, 회원가입, 로그인 등의 동적인 기능에 초첨을 잡는 것이라 부트스트랩의 기능 하나하나 뜯어보진 않았다. (F12 개발자툴로 하나하나 볼 수는 있다.)
• 큰 네비게이션 바를 만들고 거기에 좌측엔 메인으로 가는 바, 우측엔 햄버거와 그것의 드롭다운 메뉴를 만들어주었다.
• 화면의 크기에 따라 메뉴와 햄버거가 바뀌는데, 화면이 넓을 땐 네비바에 메인과 게시판이, 좁을 땐 햄버거에 메뉴안에 메인과 게시판이 나오도록 되어있다.

 

---

 

** 로그인 양식 만들기

	<!-- 로그인 컨테이너 -->
    <div class="container">
		<div class="col-lg-4">
			<!-- 점보트론 -->
			<div class="jumbotron" style="padding-top:20px;">
				<!-- form의 데이터 전송 방식과 어디로 전송할지 -->
				<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>

• 부트스트랩의 점보트론은 대형 전광판이라는 뜻으로 양식이 도드라지게 보이기 위한 배경처럼 감싸준다.
• 마치 지금 보고 있는 코드블럭의 회색 바탕처럼 말이다.
• 그 안에 form을 만들고 post방식으로 submit 버튼을 눌렀을 때 입력한 아이디와 패스워드를 loginAction.jsp로 보낸다. (jsp에 보내는 방식은 예전 서블릿을 배우기 전에 해본듯 하다. )

 

---

 

** 결과물

큰 화면

작은 화면