로그인 팝업 부분입니다.

첨부되어 있는 동영상입니다.(음성 녹음이 제대로 되지 않았습니다. 다음에 제작할 때는 음성 녹음까지 이상없는 파일로 작성됩니다.)

로그인 팝업 내용을

contents에 작성합니다.

<div class="login-form">
            <span class="login-close">
                <i class="fa fa-remove "></i>
            </span>
            <form action="">
                <ul>
                    <li>
                        <input type="text" name="id" class="id" id="id" placeholder="아이디" maxlength="16">
                    </li>
                    <li>
                        <input type="password" name="psw" class="psw" id="psw" placeholder="비밀번호" maxlength="16">
                    </li>
                    <li>
                        <input type="submit" name="submit" value="로그인">
                        <input type="reset" name="reset" value="취소">
                    </li>
                    <li>
                        <a href="member.html">회원가입</a> <a href="#">아이디 찾기</a><a href="#">비밀번호 찾기</a>
                    </li>
                </ul>
            </form>
        </div>

헤더 부분에 로그인 버튼을 작성합니다.

<!-- 로그인 버튼 -->
            <button class="l-bt">로그인</button>

CSS를 작성합니다.

/* 로그인 popup */
.l-bt{width:100px; height:50px; background:gray;
    border:1px solid black; color:white; cursor:pointer;
}
.login-form{
    width:400px;
    height:300px;
    background:transparent; /* background:#bbbbbb; */
    margin:auto;
    padding:20px;
    box-sizing:border-box;
    border:5px solid gray;
     display:none; 
}
.login-form ul{
    list-style:none;
    margin:0; padding:0;
}
.login-form ul>li{
    margin:20px 0;
    text-align:center;
}
.login-form input[type=text], 
.login-form input[type=password]{
    width:100%;
    padding:10px;
    box-sizing:border-box;
}
.login-form input[type=text]:focus,
.login-form input[type=password]:focus{
    background:orange;
}

.login-form input[type=submit],
.login-form input[type=reset]{
    width:100px;
    padding:5px; background:black; border:1px solid red;
    color:white;
}

.login-form ul>li>a{
    display:inline-block;
    margin:0 10px;
}

.login-close{
    position:absolute;
    display:inline-block;
    right:10px;
    top:10px;
    cursor:pointe
}

jQuery 작성입니다.

$(".l-bt").click(function(){
        $(".login-form").fadeIn();
    });
    
    $(".login-close").click(function(){
        $(".login-form").fadeOut();
    });