본문 바로가기

HTML과 CSS로 로그인 화면 구현하기

발견의끝 2025. 1. 8.

 

 

 

 

 

HTML 코드 (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
  <!-- 문서의 인코딩 설정 및 반응형 디자인을 위한 뷰포트 설정 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 브라우저 탭 제목 -->
  <title>로그인 화면</title>
  <!-- 외부 CSS 파일 연결 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- 로그인 컨테이너 시작 -->
  <div class="login-container">
    <!-- 로그인 박스: 흰색 배경과 그림자가 있는 중앙 영역 -->
    <div class="login-box">
      <!-- 로그인 타이틀 -->
      <h2>로그인</h2>
      <!-- 로그인 폼 시작 -->
      <form action="/login" method="POST">
        <!-- 사용자명 입력 필드 그룹 -->
        <div class="input-group">
          <label for="username">사용자명</label>
          <input type="text" id="username" name="username" placeholder="아이디를 입력하세요" required>
        </div>
        <!-- 비밀번호 입력 필드 그룹 -->
        <div class="input-group">
          <label for="password">비밀번호</label>
          <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요" required>
        </div>
        <!-- 로그인 버튼 -->
        <button type="submit" class="btn">로그인</button>
        <!-- 추가 옵션: 비밀번호 찾기 및 회원가입 링크 -->
        <div class="additional-options">
          <a href="/forgot-password">비밀번호 찾기</a>
          <a href="/signup">회원가입</a>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

CSS 코드 (styles.css)

/* 모든 요소의 기본 여백과 패딩 제거, 박스 모델 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 본문 스타일: 폰트, 배경 그라데이션, 정렬 */
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #4c9ffe, #6a4ffe); /* 그라데이션 배경 */
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  height: 100vh; /* 화면 높이를 100% 사용 */
}

/* 로그인 컨테이너: 최대 너비 설정 */
.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

/* 로그인 박스: 흰색 배경, 그림자, 둥근 모서리 */
.login-box {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}

/* 제목 스타일: 중앙 정렬, 하단 여백 */
h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

/* 입력 그룹 스타일 */
.input-group {
  margin-bottom: 15px;
}

/* 라벨 스타일 */
.input-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #555;
}

/* 입력 필드 스타일 */
.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc; /* 회색 테두리 */
  border-radius: 5px; /* 둥근 모서리 */
  font-size: 14px;
}

/* 입력 필드 포커스 효과 */
.input-group input:focus {
  outline: none; /* 기본 외곽선 제거 */
  border-color: #4c9ffe; /* 테두리 색 변경 */
  box-shadow: 0 0 5px rgba(76, 159, 254, 0.5); /* 빛나는 효과 */
}

/* 버튼 스타일 */
.btn {
  width: 100%;
  padding: 10px;
  background: #4c9ffe;
  color: #fff; /* 흰색 텍스트 */
  border: none;
  border-radius: 5px; /* 둥근 모서리 */
  font-size: 16px;
  cursor: pointer; /* 손가락 포인터로 변경 */
  transition: background 0.3s ease; /* 색상 변화 애니메이션 */
}

/* 버튼 호버 효과 */
.btn:hover {
  background: #357ae8; /* 어두운 파란색으로 변경 */
}

/* 추가 옵션 링크 스타일 */
.additional-options {
  display: flex;
  justify-content: space-between; /* 양쪽 끝으로 정렬 */
  margin-top: 15px;
}

/* 링크 스타일 */
.additional-options a {
  font-size: 12px;
  color: #4c9ffe; /* 파란색 텍스트 */
  text-decoration: none; /* 밑줄 제거 */
  transition: color 0.3s ease; /* 색상 변화 애니메이션 */
}

/* 링크 호버 효과 */
.additional-options a:hover {
  color: #357ae8; /* 어두운 파란색으로 변경 */
}

 

1. 목적 설정

  • 로그인 화면은 사용자가 ID와 비밀번호를 입력하고 인증하는 역할을 합니다.
  • 심플하면서도 직관적인 디자인을 목표로 합니다.
  • 반응형으로 설계해 다양한 화면 크기에서 동작하도록 만듭니다.

2. 기본 HTML 구조 작성

  • HTML은 로그인 화면의 구조와 내용을 정의합니다.

작업 절차:

  1. HTML5 문서 선언
    <!DOCTYPE html>로 HTML 문서를 선언합니다.
  2. 기본 요소 추가
    <html>, <head>, <body>를 작성하고 필요한 메타 데이터를 포함합니다.
  3. 페이지 제목 작성
    <title> 태그를 사용해 브라우저 탭 제목을 설정합니다.
  4. 외부 CSS 연결
    <link> 태그를 사용하여 CSS 파일을 연결합니다.
  5. 주요 컨테이너 생성
    <div> 태그로 전체를 감싸는 컨테이너(login-container)를 생성합니다.

3. HTML 폼 작성

  • 폼은 사용자 데이터를 입력받아 서버로 전송하는 역할을 합니다.

작업 절차:

  1. 로그인 박스 추가
    <div class="login-box">를 생성해 중앙 영역을 정의합니다.
  2. 타이틀 작성
    <h2> 태그로 "로그인" 텍스트를 추가합니다.
  3. 폼 작성
    • <form> 태그로 시작합니다.
    • action="/login"으로 데이터를 전송할 서버 URL을 설정합니다.
    • method="POST"로 데이터를 안전하게 전송합니다.
  4. 입력 필드 추가
    • 사용자명을 입력받는 <input type="text"> 추가.
    • 비밀번호를 입력받는 <input type="password"> 추가.
  5. 버튼 추가
    • <button> 태그로 로그인 버튼을 만듭니다.
  6. 추가 링크 작성
    • <a> 태그로 "비밀번호 찾기"와 "회원가입" 링크를 추가합니다.

4. CSS 스타일링

  • CSS는 HTML 요소의 모양과 레이아웃을 정의합니다.

작업 절차:

  1. 초기화 스타일 추가
    • margin, padding을 0으로 설정해 기본 여백 제거.
    • box-sizing: border-box로 박스 모델을 일관성 있게 설정.
  2. 배경 디자인 설정
    • body에 그라데이션 배경(linear-gradient)을 추가합니다.
    • Flexbox를 사용해 컨테이너를 화면 중앙에 배치합니다.
  3. 컨테이너 스타일링
    • login-container에 최대 너비와 패딩을 설정합니다.
  4. 박스 디자인
    • login-box에 흰색 배경, 둥근 모서리, 그림자를 추가합니다.
    • padding을 사용해 내용에 여백을 줍니다.
  5. 폼 요소 스타일링
    • label은 블록 형태로, 적당한 크기와 색상을 설정합니다.
    • input은 너비를 100%로, 테두리와 둥근 모서리를 추가합니다.
    • 포커스 효과를 추가해 입력 필드가 강조되도록 만듭니다.
  6. 버튼 디자인
    • btn 클래스에 배경색, 텍스트 색상, 크기를 지정합니다.
    • hover 효과로 버튼의 색이 변화하도록 설정합니다.
  7. 링크 스타일링
    • additional-options에 flexbox를 사용해 양쪽 끝에 배치.
    • 링크에 hover 효과를 추가해 색이 변하도록 설정.

5. 코드 테스트 및 디버깅

  • 작성한 HTML과 CSS 파일을 브라우저에서 열어 디자인을 확인합니다.
  • 문제 발생 시:
    • HTML: 태그의 닫힘 여부를 확인.
    • CSS: 선택자가 제대로 동작하는지 확인.
  • 크롬 개발자 도구(F12)를 사용해 실시간 수정과 디버깅.

6. 반응형 디자인 추가

  • 다양한 화면 크기에서 동작하도록 반응형 디자인을 구현합니다.

작업 절차:

  1. 미디어 쿼리 작성
    • 작은 화면에서는 max-width를 제한하거나 padding을 줄입니다.
    • 입력 필드와 버튼 크기를 조정합니다.
  2. 테스트
    • 브라우저 크기를 변경하면서 화면이 잘 조정되는지 확인.

7. 서버 연동 준비

  • 서버와 연결할 경우 form의 action 속성을 수정합니다.
  • 백엔드에서 ID와 비밀번호를 검증하는 로직 추가.

결과 요약

  1. HTML: 구조와 폼 요소 정의.
  2. CSS: 레이아웃과 스타일링, 사용자 경험 향상.
  3. 반응형: 유연한 디자인으로 다양한 기기에서 지원.

이 과정을 따라가면 간단한 로그인 화면을 효율적으로 구현할 수 있습니다.

 

 

'코딩 > HTML,CSS,JS' 카테고리의 다른 글

초보자를 위한 HTML 태그 완벽 가이드와 실전 활용법  (1) 2024.12.03

관련글

댓글

티스토리툴바