반응형
https://studywithowl.tistory.com/195
위의 링크는 웹 페이지를 제작하면서
작성한 일기입니다.
8탄. 우당콱쿠콰콱! 첫 웹페이지 제작 일기
3-1학기 때 '웹 프로그래밍'란 강의를 수강했다. '웹 프로그래밍'에선 '네x버'와 '다X'같은 웹 사이트를 만드는 방법에 대해서 배운다. 정확히는 웹 사이트를 만들 때 쓰이는 도구/재료에 대해서 배
studywithowl.tistory.com
1번. 홈페이지 화면
1-1. 홈페이지 코드
<!DOCTYPE HTML>
<html>
<head>
<title> Reeker's Web page </title>
<style>
#sign {font-size: 103%; position: absolute;
left: 80%; top: 32px; font-weight: 800;
text-decoration: none; color: black;}
#logo{left: 60px; top: 15px;
margin-bottom: 0px; padding: 0%;
width: 120px; height: 50px; position: absolute;}
#woman{margin-left: 220px; margin-top: 160px;
position: absolute;}
#hill {text-align: center; font-size: 60px;
top: 12%; position: absolute;
left: 630px;}
h4 {right: 100px; top: 100%; margin-left: 30px;}
ul {padding: 6px; text-align: center;
margin: 0 auto;
margin-top: 0%; font-size: 20px; }
#dropdown {padding: 20px 0px; text-align: center;
margin-top: 47px; }
li a {color: black; text-decoration: none;
padding: 5px 10px; text-align: center;
position: relative;}
li a:hover {background: darkgray; text-align: center;}
li.dropdown {display: inline-block;
text-align: center; width: 100px;
position: relative;}
.dropdown-content { display: none; position: absolute;
background-color: ghostwhite;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
.dropdown-content a {display: block; color: black;
padding: 12px 16px;
text-decoration: none; text-align: center}
.dropdown-content a:hover {background-color: rgb(196, 196, 196);}
.dropdown:hover .dropdown-content {display: block;}
#list_list {
text-align: right; position: absolute;
left:900px; top: 500px;
}
#gray { position: absolute; left:780px;
top: 320px; width: 450px; height: 500px;
padding: 10px; margin-bottom: 15px;}
#gray_ul {list-style: none; font-size: 120%;
text-align: left; line-height: 200%;}
#jominji { writing-mode: sideways-rl;
transform: rotate(181deg);
position: absolute; left: 190px;
bottom: 330px; color: rgb(81, 81, 81);
}
h2::first-letter{font-size: 160%;}
#email{position: absolute; top: 817px; left: 1057px;}
#phone{position: absolute; top: 850px; left: 1057px;}
#Phone_Email {
position: absolute; top: 820px;
left: 1090px; font-size: 16px;
font-weight: 360;
}
#location{position: absolute; top: 850px; left: 822px;}
#FAX_PNG{position: absolute; top: 817px; left: 822px;}
#sidebar{float: left; position: absolute;
left: 54%; top: 114%; font-weight: 360;}
#FAX_ADD {position: absolute; top: 820px;
left: 860px; font-size: 15px;
font-weight: 360;}
.ADD2 {position: relative; left: 85%;
bottom: 17px; }
</style>
</head>
<body>
<a id="sign" href="login.html">
SIGN IN
</a>
<img src="https://ifh.cc/g/3wyJm0.png" id="logo" alt="logo">
<ul id ="dropdown">
<li class="dropdown">
<a href=""> BEAUTY </a>
</li>
<li class="dropdown">
<a href=""> STORY </a>
</li>
<li class="dropdown">
<a href=""> CULTURE </a>
</li>
<li class="dropdown">
<a href=""> STAR </a>
<div class="dropdown-content">
<a href=""> INTERVIEW</a>
<a href=""> GOSSIP </a>
<a href=""> CELEB NEWS </a>
<li class="dropdown">
<a href=""> FASHION </a>
</li>
</li>
</ul>
<h1 id="hill"> H I L L </h1>
<!-- (Expiration : 2022-12-29) -->
<img src="https://ifh.cc/g/X0yvL6.jpg" id="woman"width="500" height="700"alt="woman">
<div id="gray">
<ul id="gray_ul">
<li> <h2> Sheridan Smith </h2></li>
<li> 2023 CEO of HILL company </li>
<li> 2022 Challenge model USA 3 Winner </li>
<li> 2020 Fashion Week Prada, Gucci models</li>
<li> 2018 Veneta, Marni Fashion Show Model</li>
<li> 2017 NY Magazine's 'Top5 models' </li>
</ul>
</div>
<img src="https://ifh.cc/g/k73hM9.png" id="email"width="23" height="23"alt="email">
<img src="https://ifh.cc/g/dQQJgW.png" id="phone"width="23" height="23"alt="phone">
<div id=Phone_Email>
Email | hill@gmile.com <br>
<br>
Phone | 099-4856-321
</div>
<div id=FAX_ADD>
FAX | 001-756-9891 <br>
<br>
ADD | Avenue 75007
</div>
<img src="https://ifh.cc/g/zwPy3Y.png" id="FAX_PNG"width="23" height="23"alt="email">
<img src="https://ifh.cc/g/J3Y5LR.png" id="location" width="23" height="23"alt="email">
</body>
</html>
2번. 로그인 화면
2-1. 로그인 코드 구현
아이디에 samuel부터~daniel을 입력하고
비밀번호 란에 wjsansrk를 입력하면 로그인이 가능하도록 구현.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Login</title>
<link rel="stylesheet" href="ui.css">
<style>
/* input box color input tag 박스에 글자 입력 시 파랑색 변경 방지 코드 */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
#login_title { text-align: center;
font-size: 50px; position: absolute;
left: 720px; top: 100px;}
.id {border: none; outline: none; border-bottom: 3px solid lightgray;
position: absolute; left: 600px; top: 240px;
width: 400px; height: 70px; font-size: 18px; text-align: unset;}
#password { border: none; outline: none; border-bottom: 3px solid lightgray;
position: absolute; left: 600px; top: 330px;
width: 400px; height: 70px; font-size: 18px;}
#btn {position: absolute;
left: 600px; width: 400px; height: 70px; top: 470px;
font-size: 20px;
color: white; background-color: black;}
#white_box {position: absolute;
width: 540px; height: 540px; left: 525px; top: 90px;
background-color: #fff;
box-shadow: 0px 0px 20px rgb(219, 219, 219);
z-index: 0;}
</style>
</head>
<body>
<div id="white_box"></div>
<div id="wrap">
<form class="login_form" action="">
<h1 id="login_title"> Log in </h1>
<P> <input class="id" name="id" type="text" placeholder="ID"></P>
<P><input id="password" name="pw" type="password" placeholder="PASSWORD"></P>
<button id="btn">LOGIN</button>
</form>
</div>
<script>
document.querySelector("#btn").addEventListener("click", () => {
var id = ['samuel', 'reeker', 'rager', 'david', 'threer',
'sweater', 'epeld', 'sounder', 'gusser', 'uberman', 'sheer',
'himer', 'saver', 'sixter', 'liner', 'quicker', 'jamers', 'adver', 'cimer',
'adver', 'cimer', 'wager', 'leeker', 'tomber', 'seeker', 'inner', 'khan', 'anthony',
'reeker', 'decker', 'davide', 'eigher', 'slider', 'youber',
'niner', 'kimbel', 'sammer', 'gyber', 'kimeral', 'jeeger', 'daniel'];
const password = "wjsansrk";
if (id.indexOf(document.querySelector(".id").value) > -1) {
if(password == document.querySelector("#password").value) {
alert("로그인에 성공하셨습니다!");
}
else {
alert("비밀번호가 맞지 않습니다.");
}
}
else {
alert("아이디 혹은 비밀번호가 맞지 않습니다.");
}
});
</script>
</body>
</html>
반응형
'BOX-IT > HTML' 카테고리의 다른 글
| [HTML] Apache WILL NOT start without the configured ports free! 해결방법 (0) | 2022.09.22 |
|---|---|
| [HTML/CSS] HTML 파일 안에 CSS 적용 방법 (0) | 2022.09.16 |
| [HTML/CSS] input 태그에 파랑색 배경 안 뜨게 하는 방법 (0) | 2022.05.31 |
| [HTML] 텍스트 세로로 만드는 방법 (0) | 2022.05.14 |
| [HTML] inline, block, inline-block 완전 정복하기 (0) | 2022.04.25 |