<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 | FILA</title>
<link rel="stylesheet" href="240321_로그인창답.css">
<script src="https://kit.fontawesome.com/d19fdaba43.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<h1>로그인</h1>
<form>
<label class="id-label form-label">
<input type="text">
</label>
<label class="pw-label form-label">
<input type="password">
<i class="fa-solid fa-eye"></i>
</label>
<section>
<label class="id-check-label">
<input type="checkbox">
<span>아이디저장</span>
</label>
<a href="#" class="id-pw-find">아이디/비밀번호 찾기</a>
</section>
<button class="form-btn" id="login-btn">로그인</button>
</form>
<section class="social-login-section">
<button class="naver-login">
<img src="./icons/네이버.png" alt="#">
<span>네이버로 로그인하기</span>
</button>
<button class="toss-login">
<img src="./icons/토스.png" alt="#">
<span>토스로 로그인하기</span>
</button>
</section>
<hr>
<button class="form-btn" id="register-btn">회원가입</button>
</main>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
border: 2px solid black;
border-radius: 10px;
padding: 50px 50px;
/*background-color: #ABCCCA;*/
width: 600px;
margin: 0 auto;
}
h1{
margin-top: 0;
margin-bottom: 30px;
text-align: center;
}
form{
display: flex;
flex-direction: column;
}
.form-label{
display: flex;
align-items: center;
margin: 2px 0;
padding: 10px 15px;
background-color: white;
border: 1px solid black;
border-radius: 5px;
}
.form-label input{
border: none;
width: 100%;
font-size: 20px;
}
.form-label input:focus{
outline: none;
}
.form-label i{
font-size: 20px;
cursor: pointer;
}
/* 체크박스랑 아아이디찾기있는 section */
form > section{
display: flex;
margin: 10px 0;
justify-content: space-between;
}
.id-check-label{
display: flex;
align-items: center;
font-size: 15px;
}
.id-check-label input{
margin-right: 5px;
}
.id-pw-find{
color: rgba(0,0,0,0.6);
font-size: 15px;
}
.form-btn{
margin: 10px 0;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
border: none;
color: white;
background-color: midnightblue;
border-radius: 20px;
cursor: pointer;
}
.form-btn:hover{
opacity: 0.9;
}
/************************/
.social-login-section{
display: flex;
margin: 10px 0;
}
.social-login-section button{
display: flex;
padding: 8px 25px;
align-items: center;
border-radius: 30px;
border: 1px solid rgba(0,0,0,0.5);
background-color: white;
cursor: pointer;
}
.social-login-section button:hover{
background-color: #AABCBB22;
}
.social-login-section img{
width: 25px;
margin-right: 10px;
}
.naver-login{
flex: 1; /* 한 줄의 공백을 다 차지한다. */
margin-right: 10px;
}
.toss-login{
flex: 1;
}
hr{
margin: 30px 0 20px 0;
border: 1px solid black;
}
#register-btn{
width: 100%;
background-color: white;
border: 1px solid black;
color: black;
transition-duration: 0.2s;
}
#register-btn:hover{
border-color: unset;
background-color: midnightblue;
color: white;
}
