브라우저 제목

로그인 팝업 부분입니다.

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

로그인 팝업 내용을

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();
    });

 

제목 날짜
웹디자인 기능사 모의 평가 자료 file 2020.04.04
요청하신 일러스트 밑그림 자료입니다. file 2020.03.21
gtq자료 2019.05.27
자료 file 2018.12.11
버튼이 있는 슬라이딩 file 2018.08.30
자격증 세로 네비게이션 2018.08.19
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
woff변환 프로그램 file 2018.06.18
태그와 css정리 목록 file 2018.06.15
연산자와 네비고정, 네비 메뉴 file 2018.06.12
네비 드롭(click)2 file 2018.06.11
네비 드롭(click)1 file 2018.06.11
bxslider 연결 및 기본 옵션 file 2018.06.07
jquery 로그인 팝업 2018.06.06
jquery 시작 동영상 file 2018.06.06
태그 정리 file 2018.06.04
21일차 동영상은 제작하지 않았습니다. 2018.05.08
레이아웃6 두번째 file 2018.05.04
레이아웃6 첫번째 file 2018.05.04
태그 목록