로그인 (23.06.26)

현·2023년 6월 26일

Coding Test

목록 보기

33/39

JavaScript 버전

📌 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습문제3 로그인</title>

    <style>
        form .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            width: 100px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        button.btn:hover {
            opacity: 0.8;
            color: yellow;
        }

        .cancel:hover {
            opacity: 0.8;
            background: red;
        }
    </style>

</head>
<body>
    
    <h2>로그인을 클릭하면 로그인 폼이 나타납니다.</h2>

    <button class="open">로그인</button>

    <div class="form-popup" id="myForm">
        <form action="08_effect메소드.html" >
            <fieldset>
                <legend>로그인</legend>

                <h1>Login</h1>

                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" required>
                <br>

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required>
                <br>

                <button type="submit" class="btn">Login</button>
                <button type="button" class="btn cancel">Close</button>
            </fieldset>
        </form>
    </div>

    <!-- JS -->
    <script>
        // 1. 이 문서를 처음 로드하면 로그인 화면은 보이지 않는다.
        // -> innerHTML = "";
        // -> visibility : hidden; // 요소는 존재하지만 보이지 X, 영역 O
        // -> display : none; // 요소는 존재하지만 보이지 X, 영역 X
        // document.getElementById("myForm").style.visibility = "hidden";
        document.getElementById("myForm").style.display = "none";

        // 2. label 태그는 가로로 '80px' 크기를 갖는다.
        const label = document.getElementsByTagName("label");

        for(let i=0; i<label.length; i++){
            label[i].style.width = '80px';
            label[i].style.display = 'inline-block';
        }

        // 3. 로그인 버튼을 클릭하면 로그인 화면이 화면에 나타난다.
        const open = document.getElementsByClassName("open")[0];

        open.addEventListener("click", function(){
            document.getElementById("myForm").style.display = "block";
        })

        // 4. Close 버튼을 클릭하면 로그인 화면이 사라진다.
        const close = document.getElementsByClassName("cancel")[0];
        close.addEventListener("click", function(){
            document.getElementById("myForm").style.display = "none";
        })

    </script>

</body>
</html>

jQuery 버전

📌 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습문제3 로그인</title>

    <style>
        form .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            width: 100px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        button.btn:hover {
            opacity: 0.8;
            color: yellow;
        }

        .cancel:hover {
            opacity: 0.8;
            background: red;
        }
    </style>

    <script src="js/jquery-3.7.0.min.js"></script>

</head>
<body>
    
    <h2>로그인을 클릭하면 로그인 폼이 나타납니다.</h2>

    <button class="open">로그인</button>

    <div class="form-popup" id="myForm">
        <form action="08_effect메소드.html" >
            <fieldset>
                <legend>로그인</legend>

                <h1>Login</h1>

                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" required>
                <br>

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required>
                <br>

                <button type="submit" class="btn">Login</button>
                <button type="button" class="btn cancel">Close</button>
            </fieldset>
        </form>
    </div>

    <!-- jQuery -->
    <script>
        // 1. 이 문서를 처음 로드하면 로그인 화면은 보이지 않는다.
        $("#myForm").css("display", "none");

        // 2. label 태그는 가로로 '80px' 크기를 갖는다.
        $(".form-popup").find("label").css({"width": "80px", "display" : "inline-block"});
        
        // 3. 로그인 버튼을 클릭하면 로그인 화면이 화면에 나타난다.
        $(".open").on("click", function(){
            $("#myForm").css("display", "block");
        })

        // 4. Close 버튼을 클릭하면 로그인 화면이 사라진다.
        $(".cancel").on("click", function(){
            $("#myForm").css("display", "none");
        })

    </script>

</body>
</html>