Step by Security Study

[HTML/CSS] 로그인 페이지 본문

개발/웹 개발

[HTML/CSS] 로그인 페이지

jooon99 2023. 8. 20. 07:07

* 웹 해킹에 관심이 생겨 유튜브 및 블로그 등을 보고 따라 만든 페이지입니다. (공부용)

 

login.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>LOGIN</title>
    <link rel="stylesheet" href="login_style.css">
    <script src="jquery-3.7.0.min.js"></script>
    <!--https://itstudy402.tistory.com/34 참고 페이지-->
</head>
<body>
    <section class="login-form">
        <h1>LOGIN</h1>
        <form action="">
            <div class="int-area">
                <input type="text" name="id" id="id" autocomplete="off" required>
                <label for="id">USER NAME</label>
            </div>
            <div class="int-area">
                <input type="password" name="pw" id="pw" autocomplete="off" required>
                <label for="pw">PASSWORD</label>
            </div>
            <div class="btn-area">
                <button type="submit">LOGIN</button>
            </div>
        </form>
        <div class="caption">
            <a href="">Forgot Your Password?</a>
        </div>
    </section>
    <script>
        let id = $('#id');
        let pw = $('#pw');
        let btn = $('.btn-area button');
    
        $(btn).on('click', function() {
            if ($(id).val() == "") {
                $(id).next('label').addClass('warning');
                setTimeout(function() {
                    $('label').removeClass('warning');
                }, 1500);
            } else if ($(pw).val() == "") {
                $(pw).next('label').addClass('warning');
                setTimeout(function() {
                    $('label').removeClass('warning');
                }, 1500);
            }
        });
    </script>
</body>
</html>

 

 

 

login_style.css

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Titillium Web', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    background: url("images/love.png") no-repeat center;
    background-size: cover;
}

body::before{
    content:"";
    position: absolute;
    z-index: 1;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0,0.7);
}

.login-form {
    position: relative;
    z-index: 2;
}

.login-form h1 {
    font-size: 23px;
    color: #fff;
    margin-bottom: 60px;
}

.int-area{
    width: 400px;
    position: relative;
    margin-top: 20px;
}

.int-area:first-child{
    margin-top: 0;
}

.int-area input {
    width: 100%;
    padding: 20px 10px 10px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #999;
    font-size: 18px;
    color:#fff;
    outline: none;
}
.int-area label {
    position: absolute;
    left: 10px;
    top: 15px;
    font-size: 18px;
    color: #999;
    transition: top .5s ease;
}
.int-area label.warning {
    color: red !important;
    animation: warning .3s ease;
    animation-iteration-count: 3;
}

@keyframes warning {
    0% {transform: translateX(-8px);}
    25% {transform: translateX(8px);}
    50% {transform: translateX(-8px);}
    75% {transform: translateX(8px);}
}

.int-area input:focus + label,
.int-area input:focus + label {
    top: -2px;
    font-size: 13px;
    color: #166cea;
}

.btn-area{
    margin-top: 30px;
}

.btn-area button{
    width: 100%;
    height: 50px;
    background: #166cea;
    color:#fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

.caption{
    margin-top: 20px;
    text-align:center;
}

.caption a{
    font-size: 15px;
    color: #999;
    text-decoration: none;
}

 

 

 

결과물

 

 

 

참고 영상

https://www.youtube.com/watch?v=dWfpp-0riYA&t=637s 

'개발 > 웹 개발' 카테고리의 다른 글

회원 가입 기능 구현  (0) 2023.09.04
[HTML/CSS] 회원가입 페이지  (0) 2023.08.27
[HTML/CSS] 메인 페이지  (0) 2023.08.19
회원 가입 페이지  (0) 2023.06.17
'개발/웹 개발' Related Articles more