HTML | 로그인 / 회원가입 창 구현

S·2024년 1월 25일
CSSJava Scripthtml
0

WEB

목록 보기
1/8

1. 로그인 페이지

실행 화면



코드

HTML & Java Script

<body>
<table>
    <tr>
        <td><h2>로그인</h2></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="ID"></td>
    </tr>
    <tr>
        <td><input type="password" placeholder=Password></td>
    </tr>
    <tr>
       <td><input type="checkbox"> 로그인 정보 저장</td>
    </tr>
   <tr>
        <td><input type="submit" value="Sign in" class="btn" onclick="alert('로그인 성공!')"></td>
    </tr>
    <tr>
        <td class="join"><a href="join.html">회원가입</a></td>
    </tr>
</table>
</body>
  • table 태그를 사용하여 다른 요소들을 배치하였다.
  • submit 버튼을 클릭할 시, 로그인 성공! 이라는 알림창이 뜬다.
  • 회원가입 텍스트에 join.html 연결하여 텍스트를 클릭하면 회원가입 페이지로 이동한다.

CSS

table {
    width: 280px;
    height: 250px;
    margin: auto;
    font-size: 15px;
}
input[type="text"], input[type="password"] {
    width: 250px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(233,233,233);
}
.btn {
    width: 263px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(164, 199, 255);
}
.btn:active {
    width: 263px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(61, 135, 255);
}
  • input 태그의 type 값이 text 인 경우에만 CSS를 적용시키고 싶으면 input[type="text"] 라고 쓰면 된다.
  • :active 를 뒤에 붙이면 버튼을 클릭할 때의 스타일도 변경할 수 있다.

전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
    table {
        width: 280px;
        height: 250px;
        margin: auto;
        font-size: 15px;
        }
    input[type="text"], input[type="password"] {
        width: 250px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(233,233,233);
    }
    .btn {
        width: 263px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(164, 199, 255);
    }
    .btn:active {
        width: 263px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(61, 135, 255);
    }
    a {
        font-size: 12px;
        color: darkgray;
        text-decoration-line: none;
       
    }
    .join {
        text-align: center;
    }
</style>
</head>
<body>
<form>
    <table>
    <tr>
        <td><h2>로그인</h2></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="ID"></td>
    </tr>
    <tr>
        <td><input type="password" placeholder=Password></td>
    </tr>
    <tr>
       <td><input type="checkbox"> 로그인 정보 저장</td>
    </tr>
    <tr>
        <td><input type="submit" value="Sign in" class="btn" onclick="alert('로그인 성공!')"></td>
    </tr>
    <tr>
        <td class="join"><a href="join.html">회원가입</a></td>
    </tr>
    </table>
</form>
</body>
</html>

2. 회원가입 페이지

실행 화면



HTML & Java Script

<body>
<form action="login.html">
    <table>
    <tr>
        <td><h2>회원가입</h2></td>
    </tr>
    <tr><td>아이디</td></tr>
    <tr><td><input type="text" class="text"></td></tr>
    <tr><td>비밀번호</td></tr>
    <tr><td><input type="password" class="text"></td></tr>
    <tr><td>비밀번호 확인</td></tr>
    <tr><td><input type="password" class="text"></td></tr>
    <tr><td>이름</td></tr>
    <tr><td><input type="text" class="text"></td></tr>
    <tr><td>생년월일</td></tr>
    <tr><td><input type="date" class="text"></td></tr>
    <tr><td>이메일</td></tr>
    <tr>
        <td><input type="text" class="email"> @ 
            <select>
                <option>naver.com</option>
                <option>gmail.com</option>
                <option>daum.net</option>
                <option>nate.com</option>
            </select>
        </td>
    </tr>
    <tr><td><input type="submit" value="가입하기" class="btn" onclick="alert('가입 성공!')"></td></tr>
    </table>
</form>
</body>
  • button 을 클릭하면 가입 성공! 이라는 알림창이 뜨며 login.html 로 이동한다.

CSS

table {
    width: 280px;
    height: 550px;
    margin: auto;      
}
.email {
    width: 127px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-color: lightgray;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(233,233,233);
}
.text {
    width: 250px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(233,233,233);
}
select {
    width: 100px;
    height: 32px;
    font-size: 15px;
    border: 1;
    border-color: lightgray;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
}
.btn {
    width: 262px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(164, 199, 255);
}
.btn:active {
    width: 262px;
    height: 32px;
    font-size: 15px;
    border: 0;
    border-radius: 15px;
    outline: none;
    padding-left: 10px;
    background-color: rgb(61, 135, 255);
}

전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join</title>
<style>
    table {
        width: 280px;
        height: 550px;
        margin: auto;
        
    }
    .email {
        width: 127px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-color: lightgray;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(233,233,233);
    }
    .text {
        width: 250px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(233,233,233);
    }
    select {
        width: 100px;
        height: 32px;
        font-size: 15px;
        border: 1;
        border-color: lightgray;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
    }
    .btn {
        width: 262px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(164, 199, 255);
    }
    .btn:active {
        width: 262px;
        height: 32px;
        font-size: 15px;
        border: 0;
        border-radius: 15px;
        outline: none;
        padding-left: 10px;
        background-color: rgb(61, 135, 255);
    }
</style>
</head>
<body>
<form action="login.html">
    <table>
    <tr>
        <td><h2>회원가입</h2></td>
    </tr>
    <tr><td>아이디</td></tr>
    <tr><td><input type="text" class="text"></td></tr>
    <tr><td>비밀번호</td></tr>
    <tr><td><input type="password" class="text"></td></tr>
    <tr><td>비밀번호 확인</td></tr>
    <tr><td><input type="password" class="text"></td></tr>
    <tr><td>이름</td></tr>
    <tr><td><input type="text" class="text"></td></tr>
    <tr><td>생년월일</td></tr>
    <tr><td><input type="date" class="text"></td></tr>
    <tr><td>이메일</td></tr>
    <tr>
        <td><input type="text" class="email"> @ 
            <select>
                <option>naver.com</option>
                <option>gmail.com</option>
                <option>daum.net</option>
                <option>nate.com</option>
            </select>
        </td>
    </tr>
    <tr><td><input type="submit" value="가입하기" class="btn" onclick="alert('가입 성공!')"></td></tr>
    </table>
</form>
</body>
</html>
profile
S
Someone has been here
다음 포스트

HTML | 게시판 / 글쓰기 구현

0개의 댓글