[HTML/CSS/JS] 로그인(login)화면 만들기

HTML + CSS+JS/Practice

[HTML/CSS/JS] 로그인(login)화면 만들기

달해해 2024. 1. 8. 17:06

<!DOCTYPE html>
<html>
    <head>
        <title>로그인</title>
        <link rel="stylesheet" href="./login.css">
    </head>
    <body>
        <h2 id="login_title">로그인</h2>
        <div id="login_box">
            <div class="member-login-container">
                <span class="member-title">
                    MEMBER
                    <span>LOGIN</span>
                </span>
                <span class="member-description">로그인을 하시면 회원을 위한 다양한 서비스와 혜택을 누리실 수 있습니다.</span>
            </div>
            
            <ul id="login">
                <li id="left">
                    <img src="./images/lock_key.PNG">
                </li><!-- left -->
                <li id="right">
                    <ul id="input_button">
                        <li id="id_pass">
                            <ul>
                                <li>
                                    <span>아 이 디</span>
                                    <input class="id-input" type="text" size="12">
                                </li> <!-- id -->
                                <li id="pass">
                                    <span>비밀번호</span>
                                    <input type="password" size="12">
                                </li> <!-- pass -->
                            </ul>
                        </li> <!-- id_pass -->
                        <li id="login_btn">
                            <button type="button" onclick="alert('클릭')">로그인</button>
                        </li>
                    </ul> <!-- input_button -->
                    <div id="auto_login">
                        <input id="auto_login_check" type="checkbox">
                        <label for="auto_login_check">자동 로그인</label>
                    </div>
                    <ul id="join_find">
                        <li>아직 회원이 아니세요?</li>
                        <li>아이디 또는 비밀번호를 잊으셨나요?</li>
                    </ul>
                </li> <!-- right -->
            </ul> <!-- login -->
        </div> <!-- login_box -->
    </body>
</html>

body {
    margin: 0;
    padding: 0;
    color: #444444;
    font-size: 12px;
    font-family: '돋움', 'Dotum';
}

li {
    list-style-type: none;
}

#login_title {
    width: 585px;
    margin: 50px;
    padding: 10px;
    border: 5px solid #e6e2d7;
    /*font-size: 50px;*/
}

#login_box {
    width: 610px;
    height: 283px;
    margin-top: 20px;
    margin-left: 50px;
    border: 2px solid #cccccc;
    border-radius: 20px;
}

.member-login-container {
    margin-top: 20px;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
}

.member-title {
    font-size: 28px;
}

.member-title > span {
    font-weight: bold;
}

.member-description {
    color: darkgray;
    font-weight: bold;
    letter-spacing: -2px;
}

#login {
    display: flex;
}

#input_button {
    margin-top: 36px;
    margin-left: 40px;
    padding-left: 0;
    display: flex;
}

.id-input {
    margin-left: 4px;
}

#pass {
    margin-top: 4px;
}

#login_btn {
    margin-left: 4px;
}

#login_btn > button {
    width: 100px;
    padding: 13px;
    border: none;
    border-radius: 4px;
    background-color: #5f6366;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

#auto_login {
    margin-top: 20px;
    margin-left: 100px;
    display: flex;
    align-items: center;
}

#auto_login > label {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#join_find {
    margin-top: 28px;
    margin-left: 64px;
}

#join_find > li {
    list-style-type: disc;
}