Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 숙명여자대학교 정보보안 동아리
- c++
- 파이썬
- The Loard of BOF
- 생활코딩
- 숙명여자대학교 정보보안동아리
- Sookmyung Information Security Study
- 기계학습
- CSS
- 풀이
- WarGame
- BOJ
- hackctf
- Javascript
- XSS Game
- lob
- 백준
- 머신러닝
- 자료구조 복습
- 드림핵
- Python
- SWEA
- C언어
- hackerrank
- c
- BOJ Python
- 웹페이지 만들기
- HTML
- siss
- PHP 웹페이지 만들기
Archives
- Today
- Total
혜랑's STORY
[To Do List _ Project] - (1) 본문
#실행결과
#코드
- 디자인
<!-- 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 |