코딩헤딩

HTML, CSS로 반응형 UI 만들기 (입력값 검증, 가짜 로그인 처리, 로컬스토리지) 본문

HTML | CSS

HTML, CSS로 반응형 UI 만들기 (입력값 검증, 가짜 로그인 처리, 로컬스토리지)

멈머이 2025. 8. 5. 21:27
728x90

 

  • 입력값이 비었는지 확인
  • 아이디/비밀번호가 맞는지 검사
  • 로그인 성공 시 다음 페이지로 이동
  • 실패 시 에러 메시지 출력
  • 사용자 이름을 로그인 시 넘겨받아 화면에 표시

 

# 로그인 화면

* .HTML 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>반응형 로그인 페이지</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="login-container">
        <h2>Login</h2>
<form id="loginForm">
  <input type="text" id="username" placeholder="Username"/>
  <div class="password-wrapper">
    <input type="password" id="password" placeholder="Password"/>
    <span class="toggle-password" id="togglePassword">👁️</span>
  </div>
  <p class="error" id="errorMsg"></p>
  <button type="submit">로그인</button>
</form>
    </div>
</body>

</html>

 

 

* .CSS 코드

/* 공통 초기화 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f4f4f4;
        font-family: 'Arial', sans-serif;
        transition: background 0.3s;
    }

    /* 로그인 박스 */
    .login-container {
        background: white;
        padding: 40px;
        border-radius: 8px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .login-container h2 {
        margin-bottom: 20px;
        text-align: center;
        color: #333;
    }

    .login-container input {
        width: 100%;
        padding: 12px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
    }

    .login-container button {
        width: 100%;
        padding: 12px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .login-container button:hover {
        background: #0056b3;
    }

    /* 다크 모드 지원 */
    @media (prefers-color-scheme: dark) {
        body {
            background: #121212;
        }

        .login-container {
            background: #1e1e1e;
            color: #eee;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
        }

        .login-container input,
        .login-container button {
            background: #2e2e2e;
            color: white;
            border: 1px solid #444;
        }

        .login-container input::placeholder {
            color: #bbb;
        }
    }

    /* 모바일 최적화 */
    @media (max-width: 480px) {
        .login-container {
            padding: 24px;
        }

        .login-container h2 {
            font-size: 20px;
        }

        .login-container input,
        .login-container button {
            font-size: 14px;
            padding: 10px;
        }
    }

    /* 비번 토글보기 */
    .password-wrapper {
        position: relative;
        width: 100%;
    }

    .password-wrapper input {
        width: 100%;
        padding-right: 40px;
        /* 아이콘 들어갈 공간 */
    }

    .toggle-password {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 18px;
        user-select: none;
    }

    /* 에러메시지 */
    .error {
        color: red;
        font-size: 14px;
        margin: 8px 0;
        display: none;
    }

 

 

* .script 코드

// 키보드 올라올 때 스크롤 보정 (모바일 대응)
window.addEventListener('resize', () => {
  document.body.scrollIntoView({ behavior: 'smooth' });
});

// 비밀번호 보기 토글
const toggle = document.getElementById("togglePassword");
const passwordInput = document.getElementById("password");

toggle.addEventListener("click", () => {
  const isPassword = passwordInput.type === "password";
  passwordInput.type = isPassword ? "text" : "password";
  toggle.textContent = isPassword ? "🙈" : "👁️";
});

// 로그인 검증 및 페이지 이동
const form = document.getElementById("loginForm");
const errorMsg = document.getElementById("errorMsg");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const username = document.getElementById("username").value.trim();
  const password = passwordInput.value.trim();

  // 테스트용 계정 정보
  const validUsername = "coding-heading";
  const validPassword = "coding-heading22";

  // 입력값 확인
  if (!username || !password) {
    showError("아이디와 비밀번호를 모두 입력하세요.");
    return;
  }

  // 검증
  if (username === validUsername && password === validPassword) {
    localStorage.setItem("username", username); // 사용자 이름 저장
    window.location.href = "dashboard.html";    // 대시보드로 이동
  } else {
    showError("아이디 또는 비밀번호가 올바르지 않습니다.");
  }
});

// 에러 메시지 표시 함수
function showError(message) {
  errorMsg.textContent = message;
  errorMsg.style.display = "block";
}

# 메인 화면

*.html 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>대시보드</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="dashboard-body">
  <aside class="sidebar">
    <h2>메뉴</h2>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">내 정보</a></li>
      <li><a href="#">설정</a></li>
    </ul>
  </aside>

  <main class="main-content">
    <h1 id="welcome"></h1>
    <p>이곳은 로그인 후 진입하는 대시보드입니다.</p>
  </main>

  <script>
    const user = localStorage.getItem("username");
    document.getElementById("welcome").innerText = `${user}님, 환영합니다!`;
  </script>
</body>
</html>

 

 

*.css 코드

/* 공통 */
body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* 대시보드 레이아웃 */
.dashboard-body {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: #1e293b;
  color: white;
  padding: 20px;
  flex-shrink: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 15px 0;
}

.sidebar a {
  color: white;
  text-decoration: none;
}

.main-content {
  flex-grow: 1;
  padding: 40px;
  background-color: #f1f5f9;
}

/* 반응형 */
@media (max-width: 768px) {
  .dashboard-body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}
728x90

'HTML | CSS' 카테고리의 다른 글

HTML, CSS로 반응형 UI 만들기 (웹앱, 다크모드)  (4) 2025.07.30
[CSS]부드럽게 깜빡이는 그림자  (0) 2024.01.19
[CSS] background-color 반투명 및 그라데이션 효과  (0) 2024.01.19
드롭다운 상단 메뉴바 만들기  (0) 2023.10.03
html 중앙정렬  (0) 2023.10.02
'HTML | CSS' Related Articles more