[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1)

2024년 08월 21일

Song hyun
작성자
2024.08.21.:21

728x90

[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1)

1. 폴더 및 파일 구성

2. 기본 뼈대 만들기

(1) sign-up.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 by JS</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/header.css">
</head>
<body>

    <!--헤더 섹션과 네비게이션 메뉴 영역-->
    <header>
        <nav class="nav-container">
            <div class="nav-item">
                    <span class="menu-link">게시판</span>
            </div>
            <div>
                <span class="menu-link">로그인</span>
                <span class="menu-link">회원가입</span>
            </div>
        </nav>
    </header>

    <main class="content-wrapper">
    <!-- 회원 가입 제목 영역 -->
    <section class="form-title">
        <h1>회원가입 by JS</h1>
    </section>

    <!-- 회원 가입 폼 영역-->
     <section>
        <form action="" onsubmit="return false;">
            <table>
                <tr>
                    <th>아이디</th>
                    <td>
                        <input type="text" class="inputs" placeholder="아이디를 입력하세요." value="tenco1">
                        <button type="button" id="checkIdBtn" class="btn-small">중복 확인</button>
                    </td>
                </tr>
                <tr>
                    <th>닉네임</th>
                    <td><input type="text" class="inputs" placeholder="닉네임을 입력하세요" value="둘리1"></td>
                </tr>
                <tr>
                    <th>비밀번호</th>
                    <td><input type="password" class="inputs" placeholder="비밀번호를 입력하세요" value="1234"></td>
                </tr>
                <tr>
                    <th>비밀번호 확인</th>
                    <td><input type="password" class="inputs" placeholder="비밀번호를 입력하세요" value="1234"></td>
                </tr>
            </table>

            <div class="btn-area">
                <button type="button" id="signUpButton" class="btn">회원가입</button>
            </div>

        </form>
     </section>

    </main>

    <!--js 파일은 하단에 두는 것이 일반적입니다.
    모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
    페이지 로드 속도를 최적화하는 데 도움이 된다.-->
    <script src="../js/header.js"></script>
    <script src="../js/signUp.js"></script>
</body>
</html>

(2) common.css



/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 적용*/

*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: Arial, sans-serif ;
    min-height: 100vh;
}

.content-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

/*
    align-content: center;
    flex wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다.
*/

.form-title h1{
    font-size:24px;
    text-align:center;
    margin-bottom: 20px;
}

table,
th,
td{
    border: 1px solid black;
    border-collapse: collapse;
}
/*  collapse
    CSS에서 테이블의 셀 간 테두리를 어떻게 처리할지 결정하는 속성.
    테두리가 중복되는 것을 방지하거나, 각 세르이 테두리를 따로 유지할지 설정 가능.
*/


table{
    width: 100%;
    margin: 0;
}

th,
td{
    text-align: left;
    padding: 10px;
}

section{
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

/* 인풋 스타일 설정 */
.inputs{
    width: calc(100% - 22px);
    height: 40px;
    border: none;
    padding: 5px 10px; 
}

.btn{
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
    color: white;
    background-color: green;
    border:none;
    cursor: pointer;
}

.btn-small{
    font-size: 10px;
    padding: 8px;
    border-radius: 4px;
    color: white;
    background-color: brown;
    border:none;
    cursor: pointer;
}

.btn-area{
    display: flex;
    justify-content: right;
    margin:20px 0;
}

(3) header.css

header{
    width: 100%;
    background-color: gray;
    padding: 10px;
    box-sizing: border-box;
}
.nav-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-link{
    color:white;
    padding: 5px 10px;
    font-size: 18px;
}
.menu-link:hover{
    background-color: darkgray;
    color:white;
    padding: 5px 10px;
    font-size: 18px;
}

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3) (0)	2024.08.23
[JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) (0)	2024.08.21
[JavaScript] 20. 실행 환경 구축 (0)	2024.08.21
[JavaScript] 19. 로컬 스토리지 (0)	2024.08.21
[JavaScript] 18. AJAX와 Fetch (0)	2024.08.02

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1)

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바