Almon Dev

모의해킹 공부 정리 1일차(과제) 본문

모의해킹/웹 개발

모의해킹 공부 정리 1일차(과제)

Almon 2024. 10. 17. 17:54

과제 내용

간이 로그인 페이지 만들기 (DB X)

    id = admin, pass = admin1234 일때 로그인 성공하는 페이지 만들기

    CSS혹은 Bootstrep으로 꾸미기 EX) 네이버, 인스타그램

 

1. 간단하게 로그인 구현

login .php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond Login</title>
    <link rel="stylesheet" href="login.css">
</head>
<body>
    <form action="login_proc.php" method="post">
        <input type="text" name="id" placeholder="ID" require>
        <input type="password" name="passwd" placeholder="Passwd" require>
        <input type="submit" value="로그인">
    </form>
</body>
</html>

form 태그로 로그인 폼을 만든 뒤에 submit 버튼을 이용해서 login_proc.php로 POST 메서드를 이용해 아이디와 패스워드를 전송한다

POST와 GET 메서드의 차이

  GET

    - URL에 파라미터로 내용이 전송됩니다. 

    - URL은 브라우저마다 길이의 제한이 있어서 대용량의 경우 제한이 걸릴 수 있습니다.

    - URL은 로그에 기록되거나 브라우저 방문 기록 같은 곳에 기록되므로

      중요한 데이터를 보내기에는 보안적으로 좋지 않습니다.

  POST 

    - URL이 아니라 Request Body에 넣어서 전송됩니다.

    - 외부에 노출되지 않아 보안적으로 안전합니다. 

그래서 로그인 같은 개인정보를 담은 요청은 POST 메서드를 이용하는 게 안전합니다.

login.css

html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

form {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

flex를 이용해서 중앙으로 정렬만 해줍니다.

login_proc.php

<?php
    $id = $_POST["id"];
    $passwd = $_POST["passwd"];

    if ($id == "admin" && $passwd == "admin1234") {
        echo "로그인에 성공하셨습니다.";
    }else {
        echo "로그인에 실패하셨습니다.";
    }

?>

php의 if 문을 활용해 로그인을 구현해 봅니다.

잘 작동합니다. 이제는 CSS를 할 차례입니다.

2. HTML 보완과 CSS 작업 

login2.php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond Login</title>
    <link rel="stylesheet" href="login2.css">
</head>
<body>
    <container class="login-container">
        <form class="login-form" action="login_proc2.php" method="post">
            <a href="/login2.php"><img src="./almond.png" alt="logo" class="logo"></a>
            <h2>Almond</h2>
            <input type="text" class="login-input" name="id" placeholder="아이디 또는 전화번호" required>
            <input type="password" class="login-input" name="passwd" placeholder="비밀번호" required>
            
            <button type="submit" class="login-submit">로그인</button>
            <?php
                $result = $_GET['result'];
                if($result == "failed") {
                    echo '<p class="login-failed">로그인에 실패하셨습니다.</p>';
                }
            ?>
        </form>
    </container>
    <footer>
        <a href="https://www.flaticon.com/kr/free-icons/" title=" 아이콘" class="logo-source"> 아이콘 제작자: Freepik - Flaticon</a>
    </footer>
</body>
</html>

container 태그는 크게 의미는 없지만 div로 도배하는 것보다는 깔끔해 보여서 사용했습니다.

img 태그로 로고를 넣고, a태그로 감싸 로고를 누르면 로그인 페이지로 이동합니다.

그 외에는 거의 동일하지만 로그인 실패 시 GET 메서드로 result에 failed값을 받아와 로그인 실패 메시지를 띄우도록 했습니다.

footer는 로고의 출처입니다.

login2.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

html {
    height: 100%;
}

body {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #f5e1c8;
}

.login-container {
    padding: 2rem;
    width: 100%;
    max-width: 400px;

    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    background-color: #efdecd;
}

.login-form h2 {
    margin-bottom: 1.5rem;

    text-align: center;

    font-size: 1.5rem;
    color: #6e4e37; 
}

.logo {
    margin-bottom: 1rem;

    width: 100%;
    text-align: center;
}

.login-input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;

    border: 1px solid #d2b48c; 
    border-radius: 4px;
    transition: border-color 0.3s ease;

    font-size: 1rem;
    color: #6e4e37; 
}

.login-input:focus {
    border-color: #deb887;
    outline: none;
}

.login-submit {
    width: 100%;
    padding: 0.75rem;

    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    
    background-color: #d2b48c;
    color: white;
    font-size: 1rem;
}

.login-submit:hover {
    background-color: #deb887;
}

.login-failed {
    margin-top: 1rem;

    text-align: center;

    font-size: 1rem;
    font-weight: bold;
    color: #6e4e37;
}

footer {
    margin-top: 2rem;
}

.logo-source {
    font-size: 1rem;
    font-weight: bold;
    color: #6e4e37;
    text-decoration: none;
    transition: color 0.7s ease;
}

.logo-source:hover {
    color: #deb887;
}

좀 많이 긴데  flex로 중앙 정렬과 크기와 색 조정, 폰트 설정 정도가 전부입니다.

border-radius 나 box-shadow를 이용해 둥글둥글하고 입체감 있는 느낌을 들게 했습니다.

hover를 이용해 마우스를 올렸을 때 색상 변화를 넣어봤습니다.

css 에는 px rem em 같은 많은 단위가 있는데 px는 말 그대로 고정된 크기이고
em과 rem은 폰트 크기의 영향을 받는 상대적인 크기입니다.

둘의 차이점은 em 은 해당 요소(태그)의 폰트크기를 기준으로 삼습니다.
rem 은 em앞에 붙은 r이 root를 뜻하는데 최상위 요소 <html>의 폰트 크기를 기준으로 삼습니다.

login2_proc.php

<?php 
    $id = $_POST["id"];
    $pass = $_POST["passwd"];

    if ($id == "admin" && $pass == "admin1234") {
        header('Location: login_successful.php');
    }else {
        header('Location: login2.php?result=failed');
    }

?>

로그인에 성공할 때는 login_success.php라는 새로운 페이지로 리다이렉션 하고,

실패할 때는 login2.php에 파라미터로 result=failed를 넣어서 리다이렉션 합니다.

login_successful.php는 아직 미완성입니다.

내일까지 로그인 성공 페이지만 만들면 되겠네요

'모의해킹 > 웹 개발' 카테고리의 다른 글

모의해킹 공부 정리 3일차 (회원가입 페이지)  (0) 2024.10.19
모의해킹 공부 정리 2일차 (과제)  (2) 2024.10.18
모의해킹 공부 정리 2일차 (과제)  (5) 2024.10.18
모의해킹 공부 정리 1일차 ( 웹서버 )  (0) 2024.10.17
모의해킹 공부 1일차 정리 (APM 설치)  (0) 2024.10.17
'모의해킹/웹 개발' Related Articles more