각진 세상에 둥근 춤을 추자

[JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계) 본문

JSP

[JSP] 프로젝트 실습 - 게시판 만들기 2 (로그인 화면 설계)

circle.j 2022. 10. 19. 11:56

 

 

 

아래 화면과 같은 로그인 화면 페이지를 구현해 본다. 

 

 

화면 페이지를 보면 3부분으로 나눌 수 있다.

헤더(header) - 메인(main) - 푸터(footer)이다. 

각각 페이지를 구현할 때 마다 헤더와 푸터 부분을 작성해도 되지만 편의성을 위해 헤더와 푸터 부분은 따로 작성 후 불러오는 방식을 쓴다.

 

 

(1) Jboard1 프로젝트 하위 - src - main - webapp

  • webapp - css 폴더 생성 - style.css 파일 생성
  • webapp - user 폴더 생성 - _header.jsp, _footer.jsp, login.jsp, register.jsp, terms.jsp 파일 생성
  • webapp - _header.jsp, _footer.jsp, list.jsp, modify.jsp, view.jsp, write.jsp 파일 생성

 

로그인 화면 설계하기 전, 기능을 구현할 파일을 미리 생성해 준다. 

 

 

(2) user 폴더 - _header.jsp 파일 작성

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인</title>
    <link rel="stylesheet" href="/Jboard1/css/style.css"/>
</head>
<body>
    <div id="wrapper">
        <header>
            <h3>Board System v1.0</h3>
        </header>

 

7행 <link rel="stylesheet" href="/Jboard1/css/style.css"/> 을 통해 css 부분을 링크로 연결한다.

 

헤더 부분의 css 코드는 다음과 같다.

 /* 태그 초기화 */
 *{
    margin: 0;
    padding: 0;
    font: normal 12px '돋움';
}

ul, ol{list-style: none;}
a {text-decoration: none; color: #111;}
input,textarea {outline: none;}

#wrapper{
    width: 800px;
    height: auto;
    margin: 0 auto;
}
/* 헤더 */
header{
    width: 100%;
    height: 35px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
}
header > h3{
    float: left;
    font-weight: bold;
    color: #777;
    margin-top: 10px;
    margin-left: 10px;

}

css 코드는 (1)에서 생성한 webapp - css 폴더 - style.css 파일에 작성한다.

 

 

(3) user 폴더 - _footer.jsp 파일 작성

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<footer>
            <p>ⒸCopyright circle.or.kr</p>
         </footer>
    </div>
</body>
</html>

 

footer의 css 코드는 다음과 같다.

/* 푸터 */
footer{
    width: 100%;
    height: 35px;
    background-color: #f7f7f7;
    border-top: 1px solid #ebebeb;
}
footer > p {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    color: #777;
}

 

 

(4) user 폴더 - login.jsp 파일 작성

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="./_header.jsp" %>
 <main id="user">
     <section class="login">
         <form action="/Jboard1/list.jsp">
             <table border="0">
                 <tr>
                     <td><img src="/Jboard1/img/login_ico_id.png" alt="아이디"></td>
                     <td><input type="text" name="uid" placeholder="아이디 입력"></td>
                 </tr>
                 <tr>
                     <td><img src="/Jboard1/img/login_ico_pw.png" alt="비밀번호"></td>
                     <td><input type="password" name="pass" placeholder="비밀번호 입력">
                     </td>
                 </tr>
             </table>
             <input type="submit" value="로그인" class="btnLogin">
         </form>
         <div>
         <h3>회원 로그인 안내</h3>
         <p>
             아직 회원이 아니시면 회원으로 가입하세요.
         </p>
         <a href="/Jboard1/user/terms.jsp">회원가입</a>
     </div>
     </section>
     
 </main>
 <%@ include file="./_footer.jsp" %>

 

login의 css 코드는 다음과 같다.

/* 로그인 */
#user > .login{
    position: relative;
    width: 360px;
    height: auto;
    border: 1px solid #cfded8;
    box-sizing: border-box;
    margin: 100px auto;
}
#user > .login > form {
  
}
#user > .login > form > table {
    margin-left: 52px;
    margin-top: 30px;
    border-collapse: collapse;
    border-spacing: 0 ;
}
#user > .login > form > table tr {
  
}
#user > .login > form > table tr > td {} 
#user > .login > form > table img {width: 20px;}
#user > .login > form > table input {
    width: 162px;
    height: 22px;
    margin-left: 6px;
    margin-bottom: 4px;
    background-color: #f7f7f7;
    border: 1px solid #e4eaec;
}
#user > .login > form > .btnLogin {
    position: absolute;
    right: 50px;
    top: 30px;
    width: 60px;
    height: 52px;
    background-color: #fdfdfd;
    border: 1px solid #bebebe;
    color: #111;
}

#user > .login > div {
    width: 100%;
    height: 104px;
    background-color: #f5f6fa;
    border-top: 1px solid #cfded8 ;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
}
#user > .login > div > h3 {}
#user > .login > div > p {
    margin: 10px 0;
}
#user > .login > div > a {
    float: right;
}

 

 

 

저작자표시

'JSP' 카테고리의 다른 글

[JSP] 프로젝트 실습 - 게시판 만들기 4 (회원가입 화면 설계)  (0) 2022.10.23
[JSP] 프로젝트 실습 - 게시판 만들기 3 (약관 화면 설계)  (0) 2022.10.21
[JSP] 프로젝트 실습 - 게시판 만들기 1 ( 유스케이스 작성)  (0) 2022.10.19
[JSP] JDBC 프로그래밍 실습 1: Member 관리  (0) 2022.10.14
[JSP] JDBC 프로그래밍 + 실습: User 관리  (0) 2022.10.14
'JSP' Related Articles more