반응형
여기서는 아주 기본적인 방식으로, 아이디와 비밀번호를 입력받아 맞으면 로그인 성공 처리, 틀리면 실패 메시지를 띄우는 자바스크립트 코드입니다.
(※ 실제 서비스에서는 보안상 서버와 DB를 반드시 사용해야 합니다.)
이 코드에서는 아이디와 암호가 프로그램 코드에 입력되어 있습니다.
- 아이디: admin, 비밀번호: 1234 입력 시 성공
로그인에 성공했을 때 "https://coding-abc.tistory.com" 이동하도록 하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 예제</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.login-box {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
width: 300px;
text-align: center;
}
input {
width: 90%;
padding: 10px;
margin: 8px 0;
border: 1px solid #aaa;
border-radius: 8px;
}
button {
width: 100%;
padding: 10px;
background: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="login-box">
<h2>로그인</h2>
<input type="text" id="username" placeholder="아이디"><br>
<input type="password" id="password" placeholder="비밀번호"><br>
<button onclick="login()">로그인</button>
<p id="message"></p>
</div>
<script>
function login() {
// 미리 정해둔 아이디와 비밀번호
const validId = "admin";
const validPw = "1234";
// 입력값 가져오기
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let msg = document.getElementById("message");
if (username === validId && password === validPw) {
msg.style.color = "green";
// msg.innerText = "로그인 성공!";
// 로그인 성공 시 main.html로 이동
window.location.href = "https://coding-abc.tistory.com";
} else {
msg.style.color = "red";
msg.innerText = "아이디 또는 비밀번호가 틀렸습니다.";
}
}
</script>
</body>
</html>
아이디: admin, 암호: 1234 -- 맞으면 coding-abc.tistory.com 사이트로 이동합니다.
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| Javascript: 반복문 for while do of in break continue (3) | 2025.08.16 |
|---|---|
| Javascript: 조건문 if (4) | 2025.08.15 |
| Javascript: 함수 Function (11) | 2025.08.14 |
| Javascript: 계산기 calculator (6) | 2025.08.13 |
| Javascript: 연산자 Operators (4) | 2025.08.13 |