혼자서 처음부터 끝까지 게시판을 만들어보는 경험을 하고 싶었다. 안경잡이 개발자 나동빈 님의 강의를 참조하였고, 모르는 상세 요소는 따로 공부해야 했다.
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)을 사용할 때 버전이 일치하지 않으면 일부 기능이 작동하지 않을 수 있다.
'Programming > Java * Spring' 카테고리의 다른 글
| [Java] 04. 접근 권한(Access Authority) (0) | 2019.03.20 |
|---|---|
| [Java] 03. 패키지(Package) (0) | 2019.03.20 |
| [Java] 02. 배열의 복사(Arrays.copy) (0) | 2019.03.15 |
| [Java] 01. nextInt(), nextDouble() 뒤에 nextLine() 사용 (0) | 2019.03.13 |
| [Java] 00. 조건문, 랜덤 - 다이스게임 (0) | 2019.03.13 |
