import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { FaUser, FaLock } from "react-icons/fa";
import { Link } from "react-router-dom";
import "./LoginPage.css";
const LoginPage = () => {
return (
<Form>
<div id="loginPage">
<div>
<p id="loginTitle">로그인</p>
</div>
<div id="inputLoginInfo">
<Form.Group className="mb-3" controlId="formBasicEmail">
<FaUser size="25" color="#A4A4A4" />
<Form.Control placeholder="U-Saint ID" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<FaLock size="25" color="#A4A4A4" />
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<div id="loginBtnDiv">
<Link to="/MainPage">
<Button id="loginBtn" variant="primary" type="submit">
<p id="loginBtnText">로그인</p>
</Button>
</Link>
</div>
</div>
</div>
</Form>
);
};
export default LoginPage;
html,
body {
height: 100%;
}
#root {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#loginTitle {
font-size: 24px;
color: #a4a4a4;
display: flex;
justify-content: center;
}
.mb-3 {
display: flex;
justify-content: center;
align-items: center;
}
#formBasicEmail {
height: 25px;
width: 80%;
border-radius: 0px;
border-top: none;
border-left: none;
border-right: none;
margin: 15px;
}
#formBasicPassword {
height: 25px;
width: 80%;
border-radius: 0px;
border-top: none;
border-left: none;
border-right: none;
margin: 15px;
}
#loginBtnDiv {
display: flex;
justify-content: center;
}
#loginBtn {
border: none;
border-radius: 10px;
background-color: #50b4d2;
width: 291px;
height: 41px;
}
#loginBtnText {
margin: 0px;
color: white;
}
justify-content나 align-items 로 화면 가운데로 오게 하고싶었지만 html에 쌓여있어서 아무리 해도 작동하지 않아 그냥 margin을 줘서 해결했었다.
html,
body {
height: 100%;
}
정말 간단하게 그냥 html,body height를 100%로 주면 되는데 margin으로 해결하려 했던 내가 바보같다...