LoginPage.vue 화면 구성

1. LoginPage.vue 템플릿 구성

<template>
    <div class="loginpage_container">
        <div class="loginpage_card">
            <div class="loginpage_appName">
                <span class="loginpage_appName_first_M">M</span>enu<span class="loginpage_appName_second_M">M</span>ate
            </div>
            <div class="loginpage_pagetitle">로그인 페이지</div>
            <form>
                <div class="loginpage_ID_form">
                    <label for="userID" class="loginpage_ID_label">아이디:</label>
                    <input type="text" id="userID" class="loginpage_ID_input">
                </div>
                <div class="loginpage_password_form">
                    <label for="userPassword" class="loginpage_password_label">비밀번호: </label>
                    <input type="password" id="userPassword" class="loginpage_password_input">
                </div>
                <button type="submit" class="loginpage_login_button">로그인</button>
            </form>
            <div class="loginpage_additional_links">
                <span class="loginpage_signup_prompt">아직 회원이 아니신가요?</span>
                <router-link to="/signup" class="loginpage_signup_link">회원가입</router-link>
                <br>
                <span class="loginpage_findUserInfo_prompt">회원 정보를 잊으셨나요?</span>
                <router-link to="/finduserinfo" class="loginpage_findUserInfo_link">아이디/ 비밀번호 찾기</router-link>
            </div>
        </div>
    </div>
</template>

 

2.LoginPage.vue CSS 구성

 

전체 레이아웃 설정

.loginpage_container

로그인 페이지의 전체 컨테이너

.loginpage_container{
    display:flex;
    justify-content:center;
    align-items: center;
    height:73.5vh;
    background-color:#f2f4f7;

• display: flex & justify-content: center & align-items: center: 페이지가 화면 중앙에 위치.
• height: 73.5vh: 화면 높이의 73.5%를 사용하여 페이지가 중간에 위치하도록 설정.
• background-color: #f2f4f7: 연한 회색 배경 설정.

 

.loginpage_card

로그인 페이지에 카드부분

.loginpage_card{
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 500px;
}

 

• background-color: white & padding: 10px: 흰색 배경과 내부 여백.
• border-radius: 10px: 모서리를 둥글게 처리.
• box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1): 부드러운 그림자 효과로 카드가 떠있는 느낌.
  • 기본형은 box-shadow [수평오프셋] [수직오프셋] [흐림반경] [색상]
• width: 500px: 카드의 고정 너비를 설정.

2. 애플리케이션 이름과 제목

.loginpage_appName

.loginpage_appName{
    font-size: 28px;
    margin-bottom:10px;
}

• font-size: 28px: 애플리케이션 이름의 크기 설정.
• margin-bottom: 10px: 아래쪽 여백을 추가.

.loginpage_appName_first_M, .loginpage_appName_second_M

.loginpage_appName_first_M,
.loginpage_appName_second_M{
    color:crimson;
}

• color: crimson: 첫 번째와 두 번째 "M" 글자를 빨간색으로 강조.

.loginpage_pagetitle

.loginpage_pagetitle {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}

• font-size: 30px & font-weight: bold: 제목을 크게 하고 굵게 설정.
• margin-bottom: 20px: 제목 아래에 여백 추가.

3. 입력 필드 스타일

.loginpage_ID_form, .loginpage_password_form

.loginpage_ID_form,
.loginpage_password_form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  text-align: left;
}

• display: flex & align-items: center: 레이블과 입력 필드를 수평으로 정렬.
• margin-bottom: 20px: 입력 필드 간 여백 추가.

.loginpage_ID_label, .loginpage_password_label

.loginpage_ID_label,
.loginpage_password_label {
  width: 80px;
  margin-right: 10px;
  font-size: 20px;
  color: #333;

• width: 80px & margin-right: 10px: 레이블의 고정 너비와 필드 사이의 여백 설정.
• font-size: 20px & color: #333: 크고 선명한 레이블 텍스트.

.loginpage_ID_input, .loginpage_password_input

.loginpage_ID_input,
.loginpage_password_input {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

• flex-grow: 1: 입력 필드가 부모 요소 안에서 가능한 모든 공간을 차지.
• padding: 10px & border: 1px solid #ddd & border-radius: 5px: 입력 필드의 테두리 및 둥근 모서리.
• outline: none: 포커스 시 외곽선 제거.

4. 로그인 버튼 스타일

.loginpage_login_button

.loginpage_login_button {
    background-color: #007bff;
    color:white;
    padding:12px;
    font-size:16px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    margin-top:10px;
    width:100%;
    transition:background-color 0.3s;
}

• background-color: #007bff & color: white: 파란색 배경과 흰색 텍스트로 강조.
• padding: 12px & font-size: 16px: 충분한 여백과 읽기 쉬운 텍스트 크기.
• border-radius: 5px: 버튼의 둥근 모서리.
• width: 100%: 버튼이 부모 요소 너비를 꽉 채움.
• transition: background-color 0.3s: 배경색이 부드럽게 변화.

.loginpage_login_button

.loginpage_login_button:hover {
    background-color: #0056b3;
    
}

• background-color: #0056b3: 호버 시 더 진한 파란색으로 변경.

5. 추가 링크 스타일

.loginpage_additional_links

.loginpage_additional_links{
    margin-top:20px;
    font-size:14px;
    color:#666;
    line-height:1.5;
    text-align:center;
}

• margin-top: 20px: 링크 섹션 상단에 여백 추가.
• font-size: 14px & color: #666: 작은 회색 글자.
• line-height: 1.5 & text-align: center: 링크 사이의 간격과 중앙 정렬.

.loginpage_signup_link, .loginpage_findUserInfo_link

.loginpage_signup_link,
.loginpage_findUserInfo_link {
  color: #007bff; /* 링크 색상 */
  text-decoration: none; /* 밑줄 제거 */
  font-weight: bold; /* 폰트 두께 */
  margin-left: 5px; /* 좌측 여백 */
}

• color: #007bff: 링크에 파란색 적용.
• text-decoration: none: 밑줄 제거.
• font-weight: bold: 폰트를 굵게 설정.
• margin-left: 5px: 링크와 다른 텍스트 사이에 좌측 여백 추가.

.loginpage_signup_link, .loginpage_findUserInfo_link

.loginpage_signup_link:hover,
.loginpage_findUserInfo_link:hover {
  text-decoration: underline; /* 호버 시 밑줄 */
}

• text-decoration: underline: 호버 시 밑줄 추가