TOP
class="layout-aside-left paging-number">
본문 바로가기
프로그래밍 및 기타/Java, JSP, HTML, CSS

[JSP] 회원가입 페이지 만들기(+ HTML, CSS)

by 기록자_Recordian 2025. 2. 22.
728x90
반응형
이전 내용
 

[JSP] 기본 문법: 로그인 페이지 만들기 (+HTML, CSS)

이전 내용 [JSP] 이클립스에서 JSP 파일 만들어 실행하기이전 내용 [JSP] JSP 개념, IDEJSP란? ◆ JSP 정의 JSP는 Java 기반의 서버측 웹 개발 기술로, 동적인 웹 페이지를 생성하는 데 사용된다. HTML에 Jav

puppy-foot-it.tistory.com

로그인 페이지 수정하기
(+ 회원가입 버튼 추가하기)

 

앞서, 로그인 페이지를 만들었다. (jsp 확장자이긴 하나, HTML과 CSS 문법에 대해 더 다뤘다.)

아무튼, 이번에는 회원 가입 페이지를 만들어 보려고 하는데, 그전에! 전에 만들었던 로그인 페이지에 회원 가입 버튼을 추가해주는 작업을 먼저 해줘야 할 거 같다.

 

우선 HTML에서는 body 부분에 "sign-up wrapper" 라는 클래스를 추가하고, Sign-up 버튼을 추가해줬다.

<body>
    <div class="login-wrapper">
        <h2>Login</h2>
        <form method="get" action="#" id="login-form">
            <input type="text" name="userName" placeholder="Email">
            <input type="password" name="userPassword" placeholder="Password">
            <label for="remember-check">
                <input type="checkbox" id="remember-check">아이디 저장하기
            </label>
            <input type="submit" value="Login">
        </form>
        <div class="signup-wrapper">
            <button type="button" class="signup-button">Sign-Up</button>
        </div>
    </div>
</body>
</html>

 

HTML을 수정해줬으니, CSS 도 수정해줘야 한다.

CSS는 우선, login-wrapper 부분에서 전체적인 높이를 키우고, Sign-up 버튼 생성 및 기타 작업을 진행해줬다.

적절한 크기를 찾느라 한 쪽에 켜놓고 수정+저장해놓고 login 페이지 새로고침 하면서 수정해줬다.

 

그리고 새로 생성한 sign-up wrapper 클래스 부분도 추가해줬다.

.signup-wrapper {
    text-align: center; /* 버튼을 중앙에 정렬 */
    margin-top: 00px; /* 로그인 폼과 거의 붙이기 */
}

.signup-button {
    width: 100%; /* 버튼 너비를 로그인 입력 필드와 맞춤 */
    height: 48px; /* 버튼 높이 설정 */
    color: #6A24FE; /* 버튼 글자 색상 설정 */
    font-size: 16px; /* 버튼 글자 크기 설정 */
    background-color: #F9F9F9; /* 버튼 배경 색상 */
    border: 2px solid #6A24FE; /* 버튼 테두리 색상 */
    border-radius: 6px; /* 버튼 모서리 둥글게 */
    cursor: pointer; /* 마우스 커서 변경 */
    transition: background-color 0.3s; /* 호버 시 배경 색상 전환 효과 */
}

.signup-button:hover {
    background-color: #E4E4E4; /* 호버 시 배경 색상 변경 */
}

 

이게 최종 로그인 페이지 화면이다.

※ 호버: 마우스 갖다대면 색깔 바뀌는 것. (마우스 커서가 없으면 흰색이다)

캡처 시에는 마우스 커서를 Sign-Up 버튼에 올려놓고 캡처했다.

회원가입 페이지 만들기 - 1
HTML

 

이제 회원가입 페이지(HTML)를 만들어볼 차례다.

원래는 회원가입 페이지를 만들 때 DB (SQL)과 연동해야 하므로, 어떤 데이터를 수집할 것인지를 확인하고 만들어야 하는데, 그래서 보통 SQL로 DB부터 만들어 놓는 거 같다. (아직 DB 수업은 받지 않았으므로.. 나중에 수정 예정)

 

어쨌든, 회원가입 시 수집할 항목은

  • 이메일 주소: 텍스트 - 도메인 부분(@ 뒤)는 드롭다운으로 선택
  • 비밀번호: 텍스트
  • 비밀번호 확인: 텍스트
  • 이름: 텍스트
  • 닉네임: 텍스트
  • 생년월일: 텍스트 (8자리) + 성별(1, 2, 3, 4)
  • 가입하기 버튼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 페이지</title>
    <link rel="stylesheet" href="styles.css"> <!-- CSS 파일 연결 -->
</head>
<body>
    <div class="signup-wrapper">
        <h2>회원가입</h2>
        <form id="signup-form" action="/signup" method="POST">
            <div>
                <label for="email">이메일 주소:</label>
                <input type="text" id="email" name="email" placeholder="이메일" required>
                <select id="domain" name="domain">
                    <option value="@gmail.com">@gmail.com</option>
                    <option value="@naver.com">@naver.com</option>
                    <option value="@daum.net">@daum.net</option>
                    <option value="@yahoo.com">@yahoo.com</option>
                    <option value="@hotmail.com">@hotmail.com</option>
                    <option value="기타">기타</option>
                </select>
            </div>
            <div>
                <label for="password">비밀번호:</label>
                <input type="password" id="password" name="password" placeholder="비밀번호" required>
            </div>
            <div>
                <label for="confirm-password">비밀번호 확인:</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="비밀번호 확인" required>
            </div>
            <div>
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" placeholder="이름" required>
            </div>
            <div>
                <label for="nickname">닉네임:</label>
                <input type="text" id="nickname" name="nickname" placeholder="닉네임" required>
            </div>
            <div>
                <label for="birthdate">생년월일:</label>
                <input type="text" id="birthdate" name="birthdate" placeholder="YYYY-MM-DD-주민번호 앞자리" maxlength="9" required oninput="addDash(this)">
            </div>
            <div>
                <input type="submit" value="가입하기">
            </div>
        </form>
    </div>

    <script>
        function addDash(input) {
            // 숫자 8자리 입력 후 "-" 추가
            input.value = input.value.replace(/[^0-9]/g, ''); // 숫자만 허용
            if (input.value.length >= 8) {
                input.value = input.value.slice(0, 8) + '-'; // 8자리 후에 "-" 추가
            }
        }
    </script>
</body>
</html>

 

이를 실행하면

회원가입 페이지 만들기 - 2
CSS

 

이제 회원가입 페이지를 꾸며줄 CSS 파일을 만들어준다.

body {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    height: 100vh; /* 전체 화면 높이 */
    background-color: #f0f0f0; /* 배경 색상 설정 */
}

.signup-wrapper {
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    background-color: white; /* 배경 색상 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    border-radius: 8px; /* 모서리 둥글게 */
}

.signup-wrapper h2 {
    font-size: 24px;
    color: #6A24FE;
    margin-bottom: 20px; /* 마진 추가 */
    text-align: center; /* 제목 중앙 정렬 */
}

.signup-wrapper div {
    margin-bottom: 16px; /* 각 입력 요소 간의 간격 */
}

.signup-wrapper label {
    display: block; /* 라벨을 블록으로 설정하여 전체 너비 사용 */
    margin-bottom: 8px; /* 라벨과 입력 필드 간의 간격 */
    color: #333; /* 라벨 색상 */
}

.signup-wrapper input[type="text"],
.signup-wrapper input[type="password"],
.signup-wrapper select {
    width: 100%; /* 전체 너비로 설정 */
    height: 48px; /* 입력 필드 높이 */
    padding: 0 10px; /* 좌우 여백 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 너비 계산 */
    border-radius: 6px; /* 모서리 둥글게 */
    border: 1px solid #ccc; /* 테두리 색상 */
    background-color: #F8F8F8; /* 배경 색상 */
    transition: border-color 0.3s; /* 테두리 색상 변화 효과 */
}

.signup-wrapper input[type="text"]:focus,
.signup-wrapper input[type="password"]:focus,
.signup-wrapper select:focus {
    border-color: #6A24FE; /* 포커스 시 테두리 색상 변경 */
    outline: none; /* 기본 아웃라인 제거 */
}

.signup-wrapper input[type="submit"] {
    width: 100%; /* 전체 너비로 설정 */
    height: 48px; /* 버튼 높이 */
    color: #fff; /* 버튼 글자 색상 */
    font-size: 16px; /* 버튼 글자 크기 */
    background-color: #6A24FE; /* 버튼 배경 색상 */
    border: none; /* 기본 테두리 제거 */
    border-radius: 6px; /* 모서리 둥글게 */
    cursor: pointer; /* 마우스 커서 변경 */
    transition: background-color 0.3s; /* 호버 시 배경 색상 변화 효과 */
}

.signup-wrapper input[type="submit"]:hover {
    background-color: #5B1DCE; /* 호버 시 배경 색상 변경 */
}

 

그리고 JSP(HTML) 파일과 연결시켜준뒤, F11을 눌러 실행하면 (HTML 을 일부 수정했다.)

 

로그인 페이지와 회원가입 페이지 연결하기

 

이제 로그인 페이지에서 Sign-Up 버튼을 누르면 회원 가입 페이지로 넘어가도록 로그인 페이지와 회원가입 페이지를 연결해보려 한다. 

 

먼저, 앞서 만든 register.jsp와 CSS 파일을 login.jsp가 있는 폴더의 하위 폴더로 넣어준다.

 

그리고나서, login.jsp 에서 코드를 일부 수정해 준다.

<div class="signup-wrapper">
            <button class="signup-button" onclick="location.href='register page/register.jsp'">회원가입</button>
</div>

정확히는, onclick= 부분에 'location.href=' 그리고, register.jsp가 들어있는 경로를 넣어준다음 

"location.href='register page/register.jsp'">

 

파일을 저장하고 이클립스를 재부팅하고, 프로젝트 오른쪽 마우스를 눌러 'refresh'를 눌러준다.

 

그리고나서 login.jsp를 실행(F11)한 뒤 회원가입 버튼을 누르면 회원가입 페이지로 이동이 잘 된다.

 

 

추가로 로그인 버튼을 누르면 로그인이 성공했다는 팝업도 뜨게끔 수정해줬다.

 

이제 이를 예전에 만들어둔 도메인으로 바꿔치기 해보려고 한다.

 

[참고되는 글]

[aws] 프록시 패스: 도메인 톰캣 화면으로 바꾸기

[전체 코드]

◆ login.jsp (로그인 페이지 - HTML)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="style.css"> <!-- 외부 CSS 파일 링크 -->
</head>
<body>
    <div class="login-wrapper">
        <h2>로그인</h2>
        <form id="login-form" onsubmit="return false;">
            <input type="text" id="username" placeholder="사용자 이름" required>
            <input type="password" id="password" placeholder="비밀번호" required>
            <label for="remember-check">
                <input type="checkbox" id="remember-check">아이디 저장하기
            </label>
            <button type="button" class="login-button" onclick="showMessage()">Log-In</button>
        </form>
        <div class="signup-wrapper">
            <button class="signup-button" onclick="location.href='register page/register.jsp'">회원가입</button>
        </div>
    </div>

    <script>
        function showMessage() {
            alert("로그인 성공");
        }
    </script>
</body>
</html>

 

◆ style.css (로그인 페이지 CSS)

* {
	padding: 0;
	margin: 0;
	border: none;
}
        
body {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
	align-items: center; /* 수직 중앙 정렬 */
	height: 140vh; /* 전체 화면 높이 */
	background-color: #f0f0f0; /* 배경 색상 설정 */
}

.login-wrapper {
    width: 400px;
    height: 400px;
    padding: 40px;
    box-sizing: border-box;
    background-color: white; /* 로그인 박스 배경 색상 */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 박스 그림자 */
	border: 2px solid #ccc; /* 회색 실선 테두리 추가 */
	border-radius: 8px; /* 모서리 둥글게 */
}

.login-wrapper > h2 {
    font-size: 24px;
    color: #6A24FE;
    margin-bottom: 20px;
}

#login-form > input {
    width: 100%;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 6px;
    background-color: #F8F8F8;
}

#login-form > input::placeholder {
    color: #D2D2D2;
}

#login-form > input[type="submit"] {
    color: #fff;
    font-size: 16px;
    background-color: #6A24FE;
    margin-top: 20px;
}

#login-form > input[type="checkbox"]{
    display: none;
}
#login-form > label{
    color: #999999;
}
#login-form input[type="checkbox"] + label{
    cursor: pointer;
    padding-left: 26px;
    background-image: url("checkbox.png");
    background-repeat: no-repeat;
    background-size: contain;
}
#login-form input[type="checkbox"]:checked + label{
    background-image: url("checkbox-active.png.svg");
    background-repeat: no-repeat;
    background-size: contain;
}


.login-button {
    width: 100%; /* 버튼 너비를 로그인 입력 필드와 맞춤 */
	height: 48px; /* 버튼 높이 설정 */
	padding: 1px;
	color: #6A24FE; /* 버튼 글자 색상 설정 */
	font-size: 16px; /* 버튼 글자 크기 설정 */
	background-color: #F9F9F9; /* 버튼 배경 색상 */
	border: 2px solid #6A24FE; /* 버튼 테두리 색상 */
	border-radius: 6px; /* 버튼 모서리 둥글게 */
	cursor: pointer; /* 마우스 커서 변경 */
	transition: background-color 0.3s; /* 호버 시 배경 색상 전환 효과 */
}

.login-button:hover {
    background-color: #E4E4E4; /* 호버 시 배경 색상 변경 */
}

.signup-wrapper {
    text-align: center; /* 버튼을 중앙에 정렬 */
	margin-top: 20px; /* 로그인 폼과 간격 추가 */
}

.signup-button {
    width: 100%; /* 버튼 너비를 로그인 입력 필드와 맞춤 */
	height: 48px; /* 버튼 높이 설정 */
	color: #6A24FE; /* 버튼 글자 색상 설정 */
	font-size: 16px; /* 버튼 글자 크기 설정 */
	background-color: #F9F9F9; /* 버튼 배경 색상 */
	border: 2px solid #6A24FE; /* 버튼 테두리 색상 */
	border-radius: 6px; /* 버튼 모서리 둥글게 */
	cursor: pointer; /* 마우스 커서 변경 */
	transition: background-color 0.3s; /* 호버 시 배경 색상 전환 효과 */
}

.signup-button:hover {
    background-color: #E4E4E4; /* 호버 시 배경 색상 변경 */
}

 

◆ register.jsp (회원가입 페이지 - HTML)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 페이지</title>
    <link rel="stylesheet" href="reg_style.css"> <!-- CSS 파일 연결 -->
</head>
<body>
    <div class="signup-wrapper">
        <h2>Sign-Up</h2>
        <form id="signup-form" action="/signup" method="POST">
            <div>
                <label for="email">전자메일:</label>
                <input type="text" id="email" name="email" placeholder="Email" required>
                <select id="domain" name="domain">
                    <option value="@gmail.com">@gmail.com</option>
                    <option value="@naver.com">@naver.com</option>
                    <option value="@daum.net">@daum.net</option>
                    <option value="@yahoo.com">@yahoo.com</option>
                    <option value="@hotmail.com">@hotmail.com</option>
                    <option value="기타">직접 입력</option>
                </select>
            </div>
            <div>
                <label for="password">비밀번호:</label>
                <input type="password" id="password" name="password" placeholder="Password" required>
            </div>
            <div>
                <label for="confirm-password">비밀번호 확인:</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="PW 확인" required>
            </div>
            <div>
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" placeholder="Name" required>
            </div>
            <div>
                <label for="nickname">닉네임:</label>
                <input type="text" id="nickname" name="nickname" placeholder="활동명" required>
            </div>
            <div>
                <label for="birthdate">생년월일:</label>
                <input type="text" id="birthdate" name="birthdate" placeholder="YYYY-MM-DD" maxlength="8">
            </div>
            <div>
                <input type="submit" value="가입하기">
            </div>
        </form>
    </div>
</body>
</html>

 

◆ reg_style.css(회원가입 페이지 CSS)

body {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    height: 100vh; /* 전체 화면 높이 */
    background-color: #f0f0f0; /* 배경 색상 설정 */
}

.signup-wrapper {
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    background-color: white; /* 배경 색상 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    border-radius: 8px; /* 모서리 둥글게 */
}

.signup-wrapper h2 {
    font-size: 24px;
    color: #6A24FE;
    margin-bottom: 20px; /* 마진 추가 */
    text-align: center; /* 제목 중앙 정렬 */
}

.signup-wrapper div {
    margin-bottom: 16px; /* 각 입력 요소 간의 간격 */
}

.signup-wrapper label {
    display: block; /* 라벨을 블록으로 설정하여 전체 너비 사용 */
    margin-bottom: 8px; /* 라벨과 입력 필드 간의 간격 */
    color: #333; /* 라벨 색상 */
}

.signup-wrapper input[type="text"],
.signup-wrapper input[type="password"],
.signup-wrapper select {
    width: 100%; /* 전체 너비로 설정 */
    height: 48px; /* 입력 필드 높이 */
    padding: 0 10px; /* 좌우 여백 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 너비 계산 */
    border-radius: 6px; /* 모서리 둥글게 */
    border: 1px solid #ccc; /* 테두리 색상 */
    background-color: #F8F8F8; /* 배경 색상 */
    transition: border-color 0.3s; /* 테두리 색상 변화 효과 */
}

.signup-wrapper input[type="text"]:focus,
.signup-wrapper input[type="password"]:focus,
.signup-wrapper select:focus {
    border-color: #6A24FE; /* 포커스 시 테두리 색상 변경 */
    outline: none; /* 기본 아웃라인 제거 */
}

.signup-wrapper input[type="submit"] {
    width: 100%; /* 전체 너비로 설정 */
    height: 48px; /* 버튼 높이 */
    color: #fff; /* 버튼 글자 색상 */
    font-size: 16px; /* 버튼 글자 크기 */
    background-color: #6A24FE; /* 버튼 배경 색상 */
    border: none; /* 기본 테두리 제거 */
    border-radius: 6px; /* 모서리 둥글게 */
    cursor: pointer; /* 마우스 커서 변경 */
    transition: background-color 0.3s; /* 호버 시 배경 색상 변화 효과 */
}

.signup-wrapper input[type="submit"]:hover {
    background-color: #5B1DCE; /* 호버 시 배경 색상 변경 */
}

 

 

다음 내용

 

728x90
반응형

'프로그래밍 및 기타 > Java, JSP, HTML, CSS' 카테고리의 다른 글

[JSP] 기본 문법: 로그인 페이지 만들기 (+HTML, CSS)  (0) 2025.02.22
[JSP] 이클립스에서 JSP 파일 만들어 실행하기  (1) 2025.02.21
[JSP] JSP 개념, IDE  (0) 2025.02.20
[Java] 1월 10일 자바 기초 - 클래스, 인스턴스  (0) 2025.01.10
[Java] 25년 1월 9일 자바 기초 - 배열  (0) 2025.01.07

관련글

티스토리툴바