[웹 해킹/ 1주차] <HTML, CSS, JavaScript> - 로그인, 회원가입 페이지 구현

Ping!

by _young 2024. 8. 18. 23:52

📺 시연 영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

영상 간단 요약

1. 비회원일 시 회원가입 페이지로 이동

2. 정보 입력 중 리셋 가능

3. 필수 정보 미입력 시 회원가입 불가

4. 관심 분야는 복수 선택 가능 ➡️ <input type="checkbox">

5. 성별은 단일 선택 가능 ➡️ <input type="radio">

6. 필수 정보 모두 입력 시 회원가입 성공 알림 뜨며 로그인 페이지로 이동

7. 아이디, 패스워드 정보 입력 후 로그인 버튼 누르면 welcome 페이지로 이동

계속 수정중이라 주석이 많은 점 주의,,

login.html (로그인 페이지)

<!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="login.css">
</head>
<body>
    <div class="container">
        <div class="image-container">
            <img src="login.png" alt="로그인 이미지">
        </div>
        <div class="login-container">
            <h2>로그인</h2>
            <form action="welcome.html" method="post">
                <input type="text" name="username" placeholder="아이디" required>
                <input type="password" name="password" placeholder="비밀번호" required>
                <button type="submit">로그인</button>
            </form>
            <p class="signup-link">회원이 아니신가요? <a href="register.html">회원가입</a></p>
        </div>
    </div>
</body>
</html>

login.css (로그인 페이지 스타일)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh;
    background-color: #f0f0f0; */
    margin: 0; /* 추가 */
}

.container {
    display: flex; /* 추가: Flexbox로 좌우 배치 */
    width: 80%;
    height: 80vh;
    max-width: 1200px;
    margin: auto;
    /* background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); */
}

.image-container {
    flex: 1; /* 수정: width 대신 flex 사용 */
    display: flex; /* 추가: 중앙 정렬을 위한 flexbox */
    justify-content: center; /* 추가: 이미지 중앙 정렬 */
    align-items: center; /* 추가: 이미지 중앙 정렬 */
    padding: 20px; /* 추가: 이미지 주변 패딩 */
}

.image-container img {
    width: 100%; /* 수정: 가로 전체를 채우도록 설정 */
    height: auto; /* 수정: 높이 비율 자동 조정 */
    max-height: 100%; /* 추가: 높이를 부모 컨테이너에 맞춤 */
    object-fit: contain; /* 수정: 이미지 비율 유지 및 크기 조정 */
}

.login-container {
    flex: 1; /* 수정: width 대신 flex 사용 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수정: 세로 가운데 정렬 */
    padding: 20px 40px; /* 수정: padding 조정 */
}

.login-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.login-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-container button:hover {
    background-color: #45a049;
}

.signup-link {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.signup-link a {
    color: #007BFF;
    text-decoration: none;
}

.signup-link a:hover {
    text-decoration: underline;
}

register.html (회원가입 페이지)

<!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="register.css">
</head>
<body>
    <div class="signup-container">
        <h2>회원가입을 위해 아래 정보를 입력해주세요.</h2>
        <form id="signup-form" action="login.html" method="post">
            <input type="text" name="name" placeholder="이름" required>
            <input type="date" name="birthdate" required>
            <input type="text" name="username" placeholder="아이디" required>
            <input type="password" name="password" placeholder="비밀번호" required>

            <div class="interest-group">
                <label>관심분야:</label>
                <label><input type="checkbox" name="interest" value="web"> 웹</label>
                <label><input type="checkbox" name="interest" value="system"> 시스템</label>
                <label><input type="checkbox" name="interest" value="reversing"> 리버싱</label>
            </div>

            <div class="gender-group">
                <label>성별:</label>
                <label><input type="radio" name="gender" value="female" required> 여성</label>
                <label><input type="radio" name="gender" value="male"> 남성</label>
                <label><input type="radio" name="gender" value="none"> 선택 안함</label>
            </div>

            <textarea name="introduction" placeholder="한줄 소개" rows="3"></textarea>

            <div class="button-group">
                <button type="reset" class="reset-button">정보 리셋</button>
                <button type="submit" class="submit-button">회원가입하기</button>
            </div>
        </form>
    </div>

    <script src="register.js"></script> <!-- JavaScript 파일 추가 -->
</body>
</html>

register.js (회원가입 양식 필수 입력값 확인)

document.getElementById('signup-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 기본 제출 동작을 막음

    // 필수 입력값이 모두 채워졌는지 확인
    var form = event.target;
    var name = form.name.value.trim();
    var birthdate = form.birthdate.value;
    var username = form.username.value.trim();
    var password = form.password.value.trim();
    var gender = form.gender.value;

    if (name && birthdate && username && password && gender) {
        alert("회원가입 완료!");
        form.submit(); // 모든 것이 유효하다면 폼 제출
    } /*else {
        alert("모든 필수 정보를 입력해주세요.");
    }*/
});

register.css (회원가입 페이지 스타일)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.signup-container {
    width: 40%;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.signup-container h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form input[type="text"],
form input[type="password"],
form input[type="date"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

form textarea {
    resize: none;
}

.interest-group,
.gender-group {
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
}

.interest-group label,
.gender-group label {
    margin-right: 10px;
}

.button-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.reset-button {
    width: 48%;
    padding: 10px;
    background-color: #d3d3d3;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.reset-button:hover {
    background-color: #c0c0c0;
}

.submit-button {
    width: 48%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #45a049;
}

welcome.html (로그인 성공 시 이동 페이지)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 성공 페이지</title>
</head>
<body>
    <h1>Welcome!</h1>
</body>

'Ping!' 카테고리의 다른 글

[웹 해킹/ 6주차] 드림핵 워게임 devtools-sources (0)	2024.09.30
[웹 해킹/ 2주차] PHP 개념 정리, 개발 환경 세팅 (XAMPP) (0)	2024.08.25
[Linux/ 리눅스] Week4 과제 (0)	2024.08.17
[Python/ 파이썬] 백준 10988, 10807, 10813 문제 풀이 (0)	2024.08.17
[Linux/ 리눅스] Week 3 과제 (0)	2024.08.17

young's record

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문