모의해킹 취업반 스터디 1주차 [과제]
2025. 4. 9. 11:24ㆍ보안/모의해킹 취업반 스터디
1주차 과제는 3개이다.
- 복습 (웹 서버 이해)
- 간이 로그인 페이지 만들기 (DB연결X)
(admin/admin1234) 라고 했을때 로그인 시켜주는 페이지 만들기. - 로그인 페이지 이쁘게 만들기 (CSS)
복습은 블로그를 통해서 했고, 간이 로그인 페이지 부터 만들어 보자.
login.php
<form method="POST" action="login_proc.php">
<input type="text" name="id" placeholder="아이디를 입력해주세요."/>
<input type="password" name="pass" placeholder="비밀번호를 입력해주세요."/>
<button type="submit">로그인</button>
</form>아이디 하고 패스워드를 POST를 통해서 받아서 login_proc.php로 넘겨주었다.
<?php
$User_ID = $_POST['id'];
$User_Password = $_POST['pass'];
if ($User_ID == "admin" && $User_Password == "admin123"){
echo "<script>alert('로그인 성공!'); history.back(); </script>";
}
else
echo "<script>alert('로그인 실패!'); history.back(); </script>";
?>php 로 User_ID, User_Password로 각각 변수에 login.php에서 받은 id하고 pass를 받아주었다.
그리고 if문을 통해서 id 가 admin 이고, password가 admin123이면 alert를 통해서 메시지를 띄워서 성공여부를 만들어주었다.
다음으로 CSS를 통해서 디자인을 해주었다.
/* 전체 배경 스타일 */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(120deg, #89f7fe, #66a6ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 로그인 박스 */
.login-box {
background: #fff;
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
/* 제목 */
.login-box h2 {
margin-bottom: 25px;
color: #333;
font-size: 24px;
}
/* 아이디 패스워드 */
.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
transition: 0.3s;
}
.login-box input:focus {
border-color: #66a6ff;
outline: none;
}
/* 로그인 버튼 */
.login-box button {
width: 100%;
padding: 12px;
background-color: #66a6ff;
border: none;
color: #fff;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-box button:hover {
background-color: #4e8ef7;
}
/* 나중에 할 회원가입 */
.login-box .links {
margin-top: 20px;
font-size: 14px;
color: #555;
}
.login-box .links a {
color: #66a6ff;
text-decoration: none;
margin-left: 5px;
}
구글 검색 및 Chatgpt를 통해서 얻은 내용을 토대로 나름대로 이쁘게? 짜보았다.
여기서 html로 연결하기 위해서 이걸 위에 추가해주었다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="style.css">
</head>
나름 예쁘게 만들었다고 생각이 든다.
1주차 과제완료.
'보안 > 모의해킹 취업반 스터디' 카테고리의 다른 글
| 모의해킹 취업반 스터디 1주차 [PHP 맛보기] (0) | 2025.04.03 |
|---|---|
| 모의해킹 취업반 스터디 1주차 [동적 페이지] (0) | 2025.04.03 |
| 모의해킹 취업반 스터디 1주차 [웹 서버의 역할] (0) | 2025.04.03 |