BOX-IT/HTML

[HTML+JVS] HTML과 JVS로 홈페이지 및 로그인 기능 구현

Buang 2022. 6. 2. 14:58
반응형

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=""> &nbsp;  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

'BOX-IT/HTML'의 다른글

  • 현재글[HTML+JVS] HTML과 JVS로 홈페이지 및 로그인 기능 구현

관련글

댓글

티스토리툴바