반응형
토스나 배민은 B2C 브랜드 페이지에서 바로 고객 서비스를 진행하기도 하는데, 이를 위해서 로그인 창이 반드시 필요하다.
포트폴리오 만들 때는 자동 로그인 기능을 생각해야겠다.
구글, 네이버, 카카오 자동 로그인 없으면 할 맛 안나지
추후 개선할 점 :1) 디바이드 코드로 ID와 PW 입력창 분할하기2) 최소 구글, 네이버, 카카오 자동 로그인 제작
1. HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Log-In</title>
<link rel='stylesheet' href='실습3.css'>
</head>
<body>
<div class="boxform"> <!-- 로그인 관련 마크업 감싸기 -->
<div class="title"> <h2> 로그인 </h2> </div> <br />
<div class="IDPW">
<input type="text" class="rounded" placeholder="사용자 아이디" /> <br />
<input type="password" class="rounded" placeholder=" 비밀번호" /> <br />
</div>
<div> <input type="button" class="button" value="로그인" />
</div> <br />
<div class="info"> 계정이 없으신가요?
<a href="https://joinus.com/" class="joinus"> 회원가입 </a>
</div>
</div>
</body>
</html>
2. CSS 코드
.boxform{
text-align: center;
border : solid 0 red;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.2); /* 연한 빨간 그림자*/
padding: 40px;
width: 250px;
margin : 0 auto;
}
.title{
font-weight: bold;
}
.IDPW{
display: flex;
flex-direction: column;
align-items: center;
}
.rounded{
width: 150px;
border-radius: 8px;
padding: 10px;
margin: -5px auto;
border: solid 1px gray ;
}
.button{
border: solid 0 white;
background-color: blue;
color: white;
border-radius: 5px;
font-size: 10px;
padding: 5px 15px;
}
.info{
font-size: 10px;
}
.joinus{
color: blue;
text-decoration: none;
}
3. 결과물
반응형