개인 프로젝트중 첫 로그인화면을 만들고 있는데요.
코드를 이렇게 짜니 로그인 화면 백그라운드 컬러 상하좌우에 공백이 생깁니다.
해결 방법좀 알려주세요 ㅠㅠ
login.js
import React from 'react';
import styles from './login.module.css';
const Login = () => {
return (
<div className={styles.body}>
<div className={styles.maintitle}>LOGIN</div>
<div className={styles.loginform}>
<form>
<input type="text" name="email" className={styles.textfield} placeholder="아이디"/>
<input type="password" name="password" className={styles.textfield} placeholder="비밀번호"/>
<input type="submit" value="로그인" className={styles.submitbtn}/>
</form>
<div className={styles.links}>
<a href="#">비밀번호를 잊어버리셨나요?</a>
</div>
</div>
</div>
);
};
export default Login;
<!--more-->login.module.css
.body {
/* margin: 0; */
height: 100vh;
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
background-color: skyblue;
/* border-radius: 5px */
}
.maintitle {
padding-top:5%;
font-size: 50px;
font-family: fantasy;
text-align: center;
}
.loginform {
width: 300px;
background-color: #EEEFF1;
margin-right: auto;
margin-left: auto;
margin-top: 5%;
padding: 20px;
text-align: center;
border: none;
}
.textfield {
font-size: 14px;
padding: 10px;
border: none;
width: 260px;
margin-bottom: 10px;
}
.submitbtn {
font-size: 14px;
border: none;
padding: 10px;
width: 260px;
background-color: #1BBC9B;
margin-bottom: 30px;
color: white;
}
.links {
text-align: center;
}
.links a {
font-size: 12px;
color: #9B9B9B;
}
