Semi Login Page : CSS version

DATE : 2023/10/28

이번에는 CSS로 스타일을 입힌 Login page를 만들어보려고 한다!

(bootstrap과는 달리 CSS는 모든 코드를 직접 작성했다)

코드를 살펴보기 전, 완성된 모습부터 보고 가자.

Semi Login Page : Bootstrap version과 마찬가지로 페이지에서 처리하고자 하는 건

사용자가 admin:admin1234를 입력했을 때만 로그인을 허용하는 것이다.

그럼 login page code부터 하나씩 살펴보도록 하자!

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>LOGIN</h1>
        <form action="./result.php" method="post">
            <label for="name">Username</label>
            <input type="text" name="name">
            <label for="password">Password</label>
            <input type="password" name="password">
            <button class="login_btn">Log in</button>
        </form>
    </div>
</body>
</html>

index.html은 위에서 확인한 페이지의 코드이다.

이번에는 CSS로 스타일을 입히기 때문에 사용할 style.css 파일을 link tag로 연결해준다.

모든 tag를 제일 바깥에서 묶어주는 <div> tag 안으로

LOGIN page임을 알려주는 <h1> tag
form을 구성하기 위한 <form> tag
사용자가 어떤 값을 입력하면 되는 지 placeholder 역할을 하는 <label> tag
사용자가 입력하는 값을 받는 <input> tag
버튼 역할의 <button> tag

이와 같이 element가 구성되어 있다.

<form> tag의 action 값이 "result.php"인 걸 보아 사용자가 버튼을 눌러 파라미터를 전달하면

그 다음으로 실행되는 코드가 result.php임을 알 수 있다.

그럼 이번엔 result.php code를 확인해보자!

[result.php]

<?php
$user = $_POST['name'];
$password = $_POST['password'];


if($user == 'admin' && $password == 'admin1234') {
    header("Location: ./result.html");
} else {
    echo 
    '<script>
        alert("WARNING!!! Who are you.");
        location.href = "./index.html";
    </script>';
}
?>

result.php는 사용자가 입력한 username & password를 $_POST에서 가져와 각각

변수$user, $password에 할당한다.

만약 사용자가 입력한 계정이 admin:admin1234라면 result.html로 이동하고

그 밖의 경우는 모두 POP up창을 띄운 뒤, 다시 index.html로 이동한다.

즉 우리가 만족 시키고자 하는 조건에 부합할 때만 result.html로 접근할 수 있다는 것!

그렇다면 result.html이 어떻게 구성되어 있는 지 확인해보자.

[result.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Result</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>WELCOME!!</h1>
        <p>Hello, Aaaaaaadmin.<br> How are you today? =D</p>
        <button class="logout_btn" id="logout_btn">Logout</button>
    </div>
    <script src="./logout.js"></script>
</body>
</html>

result.html로 접근하면 <h1> & <p> tag에 적힌 문구와 Logout 버튼을 볼 수 있을 것이다.

이때 버튼은 <form> tag 안에 위치하지 않지만

버튼으로써 기능을 제공하기 위해 짧은 JS code를 작성했다.

[logout.js]

const btn = document.getElementById("logout_btn");

btn.addEventListener('click', ()=> {
    window.location.replace("./index.html")
})

result.html에 있는 element 중 id가 "logout_btn"인 걸 찾아서 btn이라 이름을 붙인다.

만약 btn에 "click"이라는 이벤트가 발생하게 되면 index.html로 이동하라는 코드이다.

사용자가 Logout 버튼을 클릭하면 이 코드가 동작해야 하기 때문에 result.html에서

CSS를 제외한 모든 코드를 확인했으니 제대로 동작하는 지, 화면으로 확인해보자!

lndex.html로 접근하면 LOGIN form이 등장한다.

admin:admin1234를 입력하고 Log in 버튼을 누르면

if문 조건을 만족하기 때문에 Logout 버튼이 제공되는 result.html로 이동하게 되고

admin:admin1234가 아닌 다른 계정을 입력하는 경우에는

POP up 창이 띄워지는 걸 볼 수 있다.

logout 버튼을 누르거나 pop up 창을 내린 후에는 다시 index.html로 돌아간다!

페이지는 잘 동작하는 거 같으니 이제 마지막으로 CSS code를 확인해보자!

[style.css]

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: grid;
    place-items: center;
    height: 100vh;
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 400px;
    width: 340px;
    border-radius: 10px;
    padding: 20px;
    background-color: #eee;
}
h1 {
    text-align: center;
}
form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 65%;
}
label {
    font-size: 20px;
    font-weight: bold;
}
input {
    width: 100%;
    padding: 5px;
    border: none;
    border-bottom: 1px solid rgb(1, 88, 88);
    outline: none;
    background-color: #eee;
    font-size: 18px;
}
p {
    text-align: center;
    font-size: 20px;
}
.login_btn {
    font-size: 20px;
    font-weight: bold;
    border: none;
    padding: 5px;
    cursor: pointer;
    background-color: rgb(1, 88, 88);
    margin-top: 10px;
    color: #fff;
}
.logout_btn {
    font-size: 20px;
    font-weight: bold;
    border: none;
    padding: 5px;
    cursor: pointer;
    background-color: rgb(128, 0, 0);
    margin-top: 10px;
    color: #fff;
}

html code를 보면 모두 style.css를 연결한 걸 확인할 수 있는데

이는 전체적으로 동일한 스타일을 입히고, 다르게 스타일을 적용할 부분만

선택자로 구분해 하나의 파일로 코드를 줄이기 위함이다.

그래서 CSS를 보면 login_btn & logout_btn을 제외한 다른 tag는 동일하게 스타일이 적용되고

button만 클래스를 각각 지정해 색상을 다르게 입히고 있다.

만약 result.html을 위해 CSS 파일을 따로 작성하게 되면

style.css 내용과 거의 중복되는 파일이 하나 더 생기는 것이기 때문에

이와 같은 방법으로 코드의 양을 줄일 수 있다!!

PreviousSemi Login Page : Bootstrap version

Last updated 2 years ago