[자바스크립트] 미스치프 로그인 페이지

kim seung chan·2021년 4월 12일

이번에는 미스치프 로그인 페이지 구현을 보여줄려고 한다.

구현영상

1. html 코드

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./mischief_login.css">
    </head>
    <body>
        <header>
            <input id = "hm_icon" type="checkbox">
                <label for="hm_icon">
                    <span id= "first_line"></span>
                    <span id= "second_line"></span>
                    <span id= "third_line"></span>
                </label>
            <div class="sideBar">
                <div id="sideBar_menu1">
                    <ul id="unlist_menu1">
                        <li id="black"><a href="#">SHOP</a></li>
                        <li><a href="#" class="unlist_color">ALL</a></li>
                        <li><a href="mischef_outer.html" class="unlist_color">OUTER</a></li>
                        <li><a href="#" class="unlist_color">TOP</a></li>
                        <li><a href="#" class="unlist_color">BOTTOM</a></li>
                        <li><a href="#" class="unlist_color">ACC</a></li>
                        <li><a href="#" class="unlist_color">EXCLUSIVE</a></li>
                        <li><a href="#" class="unlist_color">OULET</a></li>
                        <li id="red"><a href="#">COLLECTIVE</a></li>
                    </ul>
                </div>
                <div id="sideBar_menu2">
                    <ul id="unlist_menu2">
                        <li><a href="#">COLLECTION</a></li>
                        <li><a href="#">ARCHIVE</a></li>
                        <li><a href="#">STOCKISTS</a></li>
                        <li><a href="#">SONTACT</a></li>
                        <li><a href="#">FOLLOW US</a></li>
                    </ul>
                </div>
            </div>
                
           <div id= "mschf_icon">
                <a id="main_logo">
                <img src="ms-logo.png">
            </a>
           </div>

            <div id= "right_menu">
                <ul>
                    <li><a href="" class="underline">LOGIN</a></li>
                    <li><a href="" class="underline">CART</a></li>
                    <li><a  href="" class="underline">CARENDAR</a></li>
                    <li id="search"><a href = "#" class="searchclick" id ="searchclick"> SEARCH</a></li>
                    <li><a>KR</a> <img id ="korea"src="ko_KR_18x12.png"></li>
                </ul>
                <div id="topsearchline">
                    <input type="text" id="topsearchbar">
                    <img src="./ms-close.png" alt="" id="imgclose">
                </div>
            </div>
        </header>
        <main>
            <div id="main1">
                <form>
                    <div id= "inputbox1"><input type="text" placeholder="아이디"></div>
                    <div id= "inputbox2"><input type="password" placeholder="패스워드"></div>
                </form>
                <div id="loginbox">
                    <input id = "check" type="checkbox">
                    <label for="check"><img id="checkimg" src="bg_checkbox.png"></label>
                    <label for="check"><span id="checktext">로그인 상태 유지</span></label>
                </div>
                <div id="loginbutton">
                    <button>로그인</button>
                </div>
                <div id="logintext1">
                    <ul>
                        <li><a href="#" class="login_hover_underline">회원가입</a></li>
                        <li id="loginline"></li>
                        <li id="loginline2"><a href="#" class="login_hover_underline">아이디찾기</a></li>
                    </ul>
                </div>
                <div id="logintext2">
                    <ul>
                            <li id="centerline"><a href="#" class="login_hover_underline">비밀번호찾기</a></li>
                            <li id="loginline3"></li>
                            <li id="loginline4"><a href="#" class="login_hover_underline">비회원주문</a></li>
                    </ul>
                </div>
            </div>
        </main>
        <footer>
            <ul>
                <li>주식회사 미스치프 | 대표 정지윤, 서지은 | 사업자번호 187-88-00436 | 통신판매업 2016-서울강남-03549</li>
                <li>본사 서울시 강남구 압구정로 46번길 31 2층 | 호스팅 카페24(주)</li>
            </ul>
            <ul>
                <li>PRIVACY POLICY</li>
                <li>TERMS OF USE</li>
            </ul>
            <ul class="info">
                <li>Q&A</li>
                <li>NOTIC</li>
            </ul>
            <ul class="info">
                <li>+82 70-4643-1992</li>
                <li>CUSTOMER@MISCHIEF.CO.KR</li>
            </ul>
            <ul class="info">
                <li>© 2010-2019 MISCHIEF.</li>
                <li>SITE BY BATON</li>
            </ul>
        </footer>
        <script src="./mis_log.js"></script>

    </body>

2. css 코드

body{
    word-break: keep-all;
    font-family: 'HelveticaLTWXX-Roman','Noto Sans KR',Helvetica,sans-serif;
}

header{
    
    height: 128.56px;
    padding: 30px 30px 0 30px;
    margin: 0 auto;
}

main{
    height: 1620px;
    
}

input[id ="hm_icon"]{
    display: none;
}

input[id ="hm_icon"]+label{
    display: block;
    width: 40px;
    height: 23px;
    position: fixed;
    z-index: 2;
    cursor: pointer;
    top: 25px;
    margin: 40px 0 0px 0px;
}

input[id ="hm_icon"]+ label span{
    background-color: black;
    width: 100%;
    height: 4px;
    display: block;
    position: absolute;
    transition: all 0.35s;
}

input[id ="hm_icon"]:checked+label{
    z-index: 2;
}

input[id ="hm_icon"]+label span:nth-child(1){
    top : 0;
}

input[id ="hm_icon"]+label span:nth-child(2){
    top : 50%;
    transform: translate(0,-50%);
    
}

input[id ="hm_icon"]+label span:nth-child(3){
    bottom :0;
}

input[id ="hm_icon"]:checked+label span:nth-child(1){
    top : 50%;
    transform: translateY(-50%) rotate(45deg);
}

input[id ="hm_icon"]:checked+label span:nth-child(2){
    opacity: 0;
}

input[id ="hm_icon"]:checked+label span:nth-child(3){
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

div[class="sideBar"]{
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    transition:all 0.1s;
    background-color: white;
    z-index: 1;
}

input[id = "hm_icon"]:checked+label+div{
    left: 0;
}

#sideBar_menu1{
    margin: 140px 0 0 0;
}

#unlist_menu1{
    list-style: none;
}

#unlist_menu2{
    list-style: none;
    padding-top: 10px;
}


#black{
    color: black;
    font-size: 13px;
    font-family: HelveticaLTWXX-Bold;
    font-weight: bold;
    line-height: 1.6;
}

#black>a{
    text-decoration: none;
    color: black;
}

#red{
    font-size: 13px;
    font-family: HelveticaLTWXX-Bold;
    font-weight: bold;
    line-height: 1.6;
    padding: 10px 0 0 0;
}

#red>a{
    text-decoration: none;
    color: red;
}

#unlist_menu1 > li:not(:first-child, :last-child){
    font-size: 13px;
    font-family: HelveticaLTWXX-Bold;
    font-weight: bold;
    line-height: 1.6;
    padding: 10px 0 0 0;
}

.unlist_color{
    text-decoration: none;
    color: #999;
}

#unlist_menu2 > li{
    font-size: 13px;
    font-family: HelveticaLTWXX-Bold;
    font-weight: bold;
    color: black;
    line-height: 1.6;
    padding: 10px 0 0 0;
}

#unlist_menu1>li>a:hover{
    text-decoration: underline;
}

#unlist_menu2>li>a{
    text-decoration: none;
    color: black;
}

#unlist_menu2>li>a:hover{
    text-decoration: underline;
}

#main_logo{
    margin: 0 0 0 470px;
    position: fixed;
    right: 500px;
    z-index: 3;
}

#main_logo >img{
    width: 640px;
    display: inline-block;
}

#right_menu{
    position: fixed;
    right : 25px;
    top: 30px;
    z-index: 4;
}

#right_menu > ul{
    list-style: none;
    font-size: 12px;
    font-family: 'HelveticaLTWXX-Bold','Noto Sans KR',Helvetica,sans-serif;
    line-height: 1.6;
    font-weight: bold;
    text-align: right;
}

#korea{
    margin: -2px;
}

.underline{
    text-decoration: none;
    color: black;
}

a.underline:hover{
    text-decoration: underline;
    cursor: pointer;
}

#topsearchline{
    width: 100%;
    height: 140px;
    position: fixed;
    top: -140px;
    left: 0;
    background-color: white;
    transition: all .35s;
}

#topsearchline>img{
    width: 32px;
    height: 32px;
    right: 0;
}

#topsearchbar{
    width: 90.5%;
    height: 60px;
    margin: 40px 0px 0 50px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ddd;
    background-image: url(./ms-search.png) ;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: 0px 35px;
    font-size: 20px;
    padding: 20px 0 0 50px;;
    outline: none;
}

.searchclick{
    color: black;
    text-decoration: none;
}

#search>a:hover.searchclick{
    text-decoration: underline;
}

#imgclose{
    cursor: pointer;
}

footer > ul{
    font-size: 12px;
    list-style: none;
    display: inline-block;
    padding: 20px 0 0 0;
}

.info{
    padding: 0 0 0 160px;
}

#main1{
    width: 1650px;
    position: relative;
    left: 40%;
    top: 3%;
}

#inputbox1>input{
    width: 372px;
    height: 43px;
    border: 1px solid #d7d5d5;
    outline: none;
    padding-left: 5px;
}

#inputbox2>input{
    width: 372px;
    height: 43px;
    margin: 8px 0 0 0px;
    border: 1px solid #d7d5d5;
    outline: none;
    padding-left: 5px;
}

#check{
    display: none;
}

input[id="check"]+label img{
    width: 18px;
    height: 18px;
    margin: 5px 5px -4px 0;
    cursor: pointer;
}

#checktext{
    font-size: 13px;
    cursor: pointer;
}

#loginbutton{
    margin: 10px 0 0 0;
}

#loginbutton > button{
    width: 379px;
    height: 40px;
    background-color: white;
    border: 1px solid black;
    outline: none;
    cursor: pointer;
}

#logintext1 >ul >li >a{
    font-size: 14px;
    text-decoration: none;
    color: black;
}
#logintext1>ul{
    margin: 20px 0px 0px 40px;
}

#logintext1>ul>li{
    display: inline-block;
}

#loginline{
    background-color: #ddd;
    width: 1px;
    height: 13px;
    margin: 0 0 0 55px;
}

#loginline2{
    margin: 0 0 0 50px;
}


#logintext2 >ul >li >a{
    font-size: 14px;
    text-decoration: none;
    color: black;
}

#logintext2>ul>li{
    display: inline-block;
    
}

#loginline3{
    background-color: #ddd;
    width: 1px;
    height: 13px;
    margin: 0 0 0 42px;
}

#centerline{
    margin: 0 0 0 28px;
}

#loginline4{
    margin: 0 0 0 50px;
}

#logintext1>ul>li>a:hover.login_hover_underline{
    text-decoration: underline;
}

#logintext2>ul>li>a:hover.login_hover_underline{
    text-decoration: underline;
}

check 박스는 디자인을 할 수 없어서 check박스를 none로 만들고 이미지를 넣어 체크를 하면 이미지가 보이게 만들었다.

3. javascript 코드

var 체크이미지 = document.querySelector("#checkimg");
var 체크텍스트 = document.querySelector("#checktext");
var 기본값 = false;
var 서치 = document.querySelector("#searchclick");
var 탑서치 = document.querySelector("#topsearchline");
var 탑클로즈 = document.querySelector("#imgclose");

서치.addEventListener('click', function(){
    탑서치.style.top = "0px";
});

탑클로즈.addEventListener('click',function(){
    탑서치.style.top = "-140px"
})

체크이미지.addEventListener('click',function(){
    if(기본값 == false){
        var 컨펌 = confirm("로그인 상태를 유지하시겠습니까?\n타인이 개인정보를 도용할 수 있으니,\n주의하시기 바랍니다.");
        if(컨펌 == true){
            체크이미지.src= "bg_checkbox_checked.png";
            기본값 = true;
        }
        else{
            체크이미지.src = "bg_checkbox.png";
        }
    }
    else{
        체크이미지.src = "bg_checkbox.png";
        기본값 = false;
    }
})

체크박스에 체크를 하게 된다면 confirm 알림창을 뜨게 만들었다. 그리고 확인을 누른다면 check 박스칸에 체크가 되게 만들었고 박스칸에 체크를 풀면 알림창은 뜨지 않게 만들었다.

kim seung chan

이전 포스트

[자바스크립트] mschief 메인페이지 클론

다음 포스트