본문 바로가기
IT/HTML

[로그인 페이지] 태그구성

by 옥탑방개발자 2020. 9. 24.
728x90

1. 로그인 기능 구현

  • HTML
<!DOCTYPE html>
<html>
    <head>
        <!-- title -->
        <title>Just login</title>

        <!-- favicon -->
        <link rel=" shortcut icon" href="img/favicon/favicon-32x32.png">
        <link rel="icon" href="img/favicon/favicon-32x32.png">

        <!-- css -->
        <link rel="stylesheet" href="css/css_index.css">

        <!-- semantic-ui -->
        <link rel="stylesheet" type="text/css" href="semantic/semantic.css">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="semantic/semantic.js"></script>

        <!-- bootstrap -->
        <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> -->
        
    </head>
    <body>
        <h1 class="screen_out">로그인 페이지 입니다</h1>
        <div class="login_page">
            <h2 class="screen_out">로그인</h2>
            <strong class="title_login">로그인 하세요.</strong>
            <form method="post" id="authFrom" action="html/login_auth">
                <input type="hidden" name="when the form action to spend this value" value="123">
                <fieldset>
                    <legend class="screen_out">로그인 정보 입력폼</legend>
                    <div class="inp_text">
                        <label for="loginId" class="screen_out">아이디</label>
                        <input type="email" id="loginId" name="loginId" placeholder="ID">
                    </div>
                    <div class="inp_text">
                        <label for="loginPw" class="screen_out">비밀번호</label>
                        <input type="password" id="loginPw" name="loginPw" placeholder="Password">
                    </div>
                    <button type="submit" class="btn_login">로그인</button>
                    <div class="login_append">
                        <input type="checkbox" id="keepLogin" class="inp_radio" name="keepLogin">
                        <label for="keepLogin">로그인 상태 유지</label>
                    </div>
                    <span>
                        <a href="#" class="link_find">아이디</a>
                        /
                        <a href="#" class="link_find">비밀번호 찾기</a>
                    </span>
                </fieldset>
                <input type="hidden" name="fp" value="MFA(Multi Factor Authenitication) 다요소 인증 / OTP로 새로운기기에 접속 처리 등의 장치를 만드는 구문">
            </form>
        </div>
    </body>
    <footer>

    </footer>
</html>

 

 

2. 파비콘 등록

참고 : 블로그

 

 

3. CSS 작성

 

728x90