혜랑's STORY

[To Do List _ Project] - (1) 본문

무지성 작업실

[To Do List _ Project] - (1)

hyerang0125 2020. 7. 16. 21:52

#실행결과

로그인 페이지

#코드

- 디자인

<!-- SignIn.html / Sign-In page-->
<HTML>
<HEAD>
    <TITLE>ToDoList Sign-In page</TITLE>
    <link rel="stylesheet" type="text/css" href="box.css" />
    <link rel="stylesheet" type="text/css" href="text.css" />
    <link rel="stylesheet" type="text/css" href="pos.css" />
    <script src="login.js"></script>
    <style>
        body {
            font-family: 'Gmarket Sans TTF';
            font-weight:bolder;
            color: #513F3F;
        }
        #grid{
            display:grid;
            grid-template-columns:421.5px 1fr;
        }
    </style>
</HEAD>
<BODY>
    <div class="mainBox" style="border: 11px solid #513F3F;">

    </div>
    <img src="logo.png" class="loginPng"/>
    <img src="category.png" class="category"/>
    <div id="grid" class="login">
        <div>
            <div class="idText" style="margin:0;padding:7.5px;padding-left:25.5px;">
                ID : <input type="text" id="loginId" class="id_pw"/>
            </div>
            <div class="pwText" style="margin:0; padding:7.5px" onclick="onKeyupPW(event)">
                PW : <input type="password" id="loginPW" class="id_pw" />
            </div>
        </div>

        <input type="button" value="Go" class="signIn" onclick=Login() />
    </div>

 
</BODY>
</HTML>

/* box.css */
.edge {
    top: 58px;
    left: 60px;
    width: 1801px;
    height: 965px;
    border: 11px solid #513F3F;
    opacity: 1;
}
.signIn {
    top: 630px;
    left: 1121px;
    width: 60px;
    height: 92px;
    margin: 0;
    margin-top:7.5px;
    background: #513F3F 0% 0% no-repeat padding-box;
    border-radius: 11px;
    opacity: 1;
    color:white;
    font: Bold 18px/20px Gmarket Sans TTF;
    letter-spacing: 0px;
}
.id_pw {
    margin-left: 15px;
    width: 298.9px;
    height:32px;
    font-size:32px;
    border-bottom-color: #513F3F;
    border-top:none;
    border-left:none;
    border-right:none;
}
/* text.css */
.idText {
    text-align: left;
    font: Bold 35px/40px Gmarket Sans TTF;
    letter-spacing: 0px;
    color: #513F3F;
    opacity: 1;
}

.pwText {
    text-align: left;
    font: Bold 32px/37px Gmarket Sans TTF;
    letter-spacing: 0px;
    color: #513F3F;
    opacity: 1;
}

/* pos.css */
.login{
    position:absolute;
    left:647px;
    top:572px;
}
.loginPng {
    width: 204px;
    height: 226px;
    margin:0;

    position: absolute;
    top: 256px;
    left: 798px;
}
.mainBox{
    width:1725px;
    height:800px;

    position:absolute;
    top:58px;
    left:60px;
    right:59px;
    bottom:57px;
}
.category{
    width:49px;

    position:absolute;
    top:95px;
    left:1708px;
}

- 실행 : 아이디와 비밀번호가 존재하면 메인페이지로 넘어가기

/* Login */
function Login() {
    var objId = document.getElementById("loginId");
    var objPw = document.getElementById("loginPW");

    if (objId.value == "") {
        alert("Check Your Id");
        objId.focus();
        return;
    }
    else if (objPw.value == "") {
        alert("Check Your PassWord");
        objPw.focus();
        return;
    }
    else
    document.location.href="main.html"

}

/* Enter Key*/
function onKeyupPW(ev) {
    var evKeyup = null;
    if (ev)
         evKeyup = ev;
    else
         evKeyup = window.event;

    if (evKeyup.keycode == 13) {
        document.getElementById("loginPW").blur();
        Login();
    }
}

#느낀점

 생각보다 웹페이지를 만드는데 오랜시간이 걸리는 것 같다. 아직 익숙하지 않아서 그런 것 같기도 하다. 그래도 하루종일 해도 질리지 않는 일인 것 같다. 나름 재미도 있었고 내가 디자인한 그대로 웹 페이지를 만들 수 있다는 점이 신나기도 한다. 차곡차곡 만들어나가 완전한 투두리스트의 형태가 될 때까지 노력해야겠다 :D

저작자표시

'무지성 작업실' 카테고리의 다른 글

[설리번 프로젝트] 교육자료 만들기 및 활동증명서  (0) 2021.02.15
[자기소개 페이지 만들기] : HTML, CSS  (0) 2021.01.22
[To Do List Project]-(2)  (0) 2020.07.18
'무지성 작업실' Related Articles more