5.9 로그인 화면

이번 섹션에서는 로그인 화면을 반응형으로 구현하는 방법을 익힙니다. 간단한 로그인 폼을 구성하고, 다양한 화면 크기에 맞춰 레이아웃이 자동으로 조정될 수 있도록 CSS Flexbox와 Grid를 활용합니다. 또한, 예제를 통해 Bootstrap이나 Tailwind CSS 없이 순수 CSS만으로 디자인을 진행해 보겠습니다.

1. HTML 구조

로그인 화면의 기본적인 HTML 구조를 작성합니다. 이 구조에는 사용자에게 입력을 받을 수 있는 텍스트 필드와 버튼이 포함됩니다.

2. CSS 스타일링

CSS를 이용하여 로그인 화면을 스타일링합니다. 반응형 디자인을 위해 미디어 쿼리를 사용하고, 다양한 디바이스에 대한 스타일을 설정합니다.

3. JavaScript 기능

로그인 버튼 클릭 시 유효성 검사를 수행하여, 사용자가 입력한 정보가 올바른지 확인하는 JavaScript 로직을 추가합니다.

예제 코드

아래의 코드는 로그인 화면을 구성하는 HTML, CSS, JavaScript의 예시입니다.

HTML

<div class="login-container">
    <form class="login-form">
        <h1>로그인</h1>
        <input type="text" placeholder="사용자 ID" required />
        <input type="password" placeholder="비밀번호" required />
        <button type="submit">로그인</button>
    </form>
</div>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.login-container {
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-form button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .login-container {
        width: 95%;
    }
}

JavaScript

document.querySelector('.login-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 기본 제출 동작을 방지
    const userId = this.querySelector('input[type="text"]').value;
    const password = this.querySelector('input[type="password"]').value;

    if (userId && password) {
        alert('로그인 정보가 제출되었습니다.');
        // 여기에 서버와의 로직을 추가하면 됩니다.
    } else {
        alert('모든 필드를 입력해 주세요.');
    }
});

4. 실습

이제 위 코드를 바탕으로 자신의 스타일과 레이아웃을 적용한 로그인 화면을 만들어 보세요. 여러 디바이스에서의 반응형 동작을 확인하며 실험해 보십시오.

5. 정리

로그인 화면을 구현하면서 사용한 여러 개념과 코드 일부를 리뷰하였습니다. 다음 장에서는 이 로그인 시스템을 확장하여 다양한 사용자 인터페이스를 지속적으로 만들어 보도록 하겠습니다.