Programming/Java * Spring

[커뮤니티 게시판 만들기] 1. 로그인 페이지 디자인

고막고막 2019. 1. 18. 20:04

혼자서 처음부터 끝까지 게시판을 만들어보는 경험을 하고 싶었다. 안경잡이 개발자 나동빈 님의 강의를 참조하였고, 모르는 상세 요소는 따로 공부해야 했다.

 

누구나 따라하면서 배우는 JSP 커뮤니티 게시판 만들기 - 인프런
JSP 게시판 강좌를 들으시면 JSP에 대한 막연한 두려움이 사라지게 됩니다! 웹 사이트 개발에서 가장 핵심이 되는 게시판 기능을 JSP를 이용해서 순식간에 개발하게 됩니다. 웹 디자인 프레임워크로는 부트스트랩을 이용하며 게시판을 만드는 방법을 차근차근 설명해드립니다. 게시판의
www.inflearn.com

개발 환경

  • Windows10
  • Eclipse Jee oxygen 2018-12
  • Apache Tomcat v.8.5
  • MySQL 8.0
  • JDK 1.8.0_191
  • BootStrap v.3.3.7

 

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" initial-scale="1"> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</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">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-lg-4"></div> 		<div class="col-lg-4"> 			<div class="jumbtron" style="padding-top: 20px;"> 				<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 class="col-lg-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>

 

Today I Learned

  • <meta name="viewport"> : 모바일 사파리에서 최초로 도입한 반응형 메타 태그로, 뷰포트의 크기와 스케일을 조정할 수 있게 해줌. 속성으로는 width, height에 숫자를 지정하거나 위의 코드처럼 뷰포트 높이에 따라 크기와 높이를 변하게 할 수 있고, initial-scale은 페이지가 처음 로드 될 때 줌레벨을 의미한다.
  • <div class="dropdown"> : 드롭다운 메뉴를 나타냄. 드롭다운 메뉴를 열려면 .dropdown-toogle이나 data-toggle="dropdown" 속성의 버튼 또는 링크를 누른다. .caret은 화살표 아이콘을 생성한다.
  • <li class="active"> : 현재 선택된 페이지 단 한개만 넣을 수 있다.
  • <script>에서 제이쿼리와 부트스트랩을 참조하는 CDN(Content Delivery Network)을 사용할 때 버전이 일치하지 않으면 일부 기능이 작동하지 않을 수 있다.