<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> HTML CSS 및 JavasScripr이 로그인 및 등록양식</b></span></p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- ===== Iconscout CSS ===== --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="<a href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" target="_blank" class="ke-link">https://unicons.iconscout.com/release/v4.0.0/css/line.css</a>"> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- ===== CSS ===== --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Login & Registration Form</title>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    /* ===== Google Font Import - Poformsins ===== */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>*{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Poppins', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    max-width: 430px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container .forms{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 440px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 200%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: height 0.2s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container .form{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: margin-left 0.18s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container.active .login{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-left: -50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: margin-left 0.18s ease, opacity 0.15s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container .signup{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: opacity 0.09s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container.active .signup{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    opacity: 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: opacity 0.2s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container.active .forms{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 600px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container .form .title{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 27px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 600; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .title::before{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    content: ''; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    bottom: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 3px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .input-field{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field input{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    outline: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 16px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-bottom: 2px solid #ccc; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-top: 2px solid transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all 0.2s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field input:is(:focus, :valid){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-bottom-color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field i{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transform: translateY(-50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #999; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 23px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all 0.2s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field input:is(:focus, :valid) ~ i{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field i.icon{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input-field i.showHidePw{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    right: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .checkbox-text{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: space-between; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkbox-text .checkbox-content{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkbox-content input{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-right: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    accent-color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .text{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #333; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 14px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form a.text{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form a:hover{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: underline; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .button{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 35px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .button input{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 17px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 500; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    letter-spacing: 1px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 6px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #4070f4; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    transition: all 0.3s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.button input:hover{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #265df2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form .login-signup{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin-top: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="forms"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="form login"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <span class="title">Login</span> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <form action="#"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="text" placeholder="Enter your email" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-envelope icon"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="password" class="password" placeholder="Enter your password" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-lock icon"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-eye-slash showHidePw"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="checkbox-text"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <div class="checkbox-content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <input type="checkbox" id="logCheck"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <label for="logCheck" class="text">Remember me</label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                         </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <a href="#" class="text">Forgot password?</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field button"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="button" value="Login"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </form> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="login-signup"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <span class="text">Not a member? </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <a href="#" class="text signup-link">Signup Now</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <!-- Registration Form --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="form signup"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <span class="title">Registration</span> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <form action="#"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="text" placeholder="Enter your name" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-user"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="text" placeholder="Enter your email" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-envelope icon"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="password" class="password" placeholder="Create a password" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-lock icon"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="password" class="password" placeholder="Confirm‎ a password" required> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-lock icon"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <i class="uil uil-eye-slash showHidePw"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="checkbox-text"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <div class="checkbox-content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <input type="checkbox" id="termCon"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <label for="termCon" class="text">I accepted all terms and conditions</label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <div class="input-field button"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <input type="button" value="Signup"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </form> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <div class="login-signup"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <span class="text">Already a member? </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <a href="#" class="text login-link">Login Now</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     <script src="script.js"></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>const container = document.querySelector(".container"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      pwShowHide = document.querySelectorAll(".showHidePw"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      pwFields = document.querySelectorAll(".password"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      signUp = document.querySelector(".signup-link"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      login = document.querySelector(".login-link"); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    //   js code to show/hide password and change icon </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    pwShowHide.forEach(eyeIcon =>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        eyeIcon.addEventListener("click", ()=>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            pwFields.forEach(pwField =>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                if(pwField.type ==="password"){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    pwField.type = "text"; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    pwShowHide.forEach(icon =>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        icon.classList.replace("uil-eye-slash", "uil-eye"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                }else{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    pwField.type = "password"; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    pwShowHide.forEach(icon =>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        icon.classList.replace("uil-eye", "uil-eye-slash"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            })  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        }) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    }) </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // js code to appear signup and login form </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    signUp.addEventListener("click", ( )=>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        container.classList.add("active"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    login.addEventListener("click", ( )=>{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        container.classList.remove("active"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </scritt> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </b></span> <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>    </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> HTML CSS 및 JavasScripr이 로그인 및 등록양식 </b></span></p>
<!-- -->
]]>
카페 게시글
◈─---… HTML 실습방
HTML CSS 및 JavasScripr이 로그인 및 등록양식
gyun님
추천 0
조회 2
23.12.05 16:55
댓글 0
다음검색
