728x90
SMALL
<body>
<form action="/login" name ="use=login" class ="login-form">
<label>Username or email address</label>
<input type="text" class="basic-input"/>
<lable>Password</lable>
<input type="password" class="basic-input"/>
<input type="submit" value="Sign in" class ="basic-input-submit"/>
</form>
<style>
:root {
/* 스타일에서 사용할 변수를 선언 */
--color-login-form-background: #f6f8fa;
--color-login-btn: #2c974b;
--color---color-login-btn-hover : #2ebc4f;
}
.login-form {
background-color: var(--color-login-form-background);
width: 310px;
height: 228px;
margin: 16px 0 0;
border: 1px dashed
}
</style>- solid : 실선
dashed: 점선
- border-radius: 5px;
사각형의 테두리를 둥글게
- box-sizing: border-box;
테두리를 포함한 전체 상자를 310, 228로 바꾸겠다는것
- height : 26px 저 라벨들이 조금 두껍게 되었다
- .basic-input-submit:hover{
background-color: var(--color-login-btn-hover);
cursor: pointer;
}
커서를 올려놓는 부분에 Sign in쪽의 색이 바뀌게끔
- 최종코드
<!DOCTYPE html>
<html>
<head>
<title>20201110</title>
<style>
:root{
/* 스타일에서 사용할 변수들 선언 */
--color-login-form-background: #f6f8fa;
--color-login-btn: #2c974b;
--color-login-btn-hover: #2ebc4f;
}
.login-form{
background-color: var(--color-login-form-background);
width: 310px;
height: 228px;
margin: 16px 0 0;
border: 1px solid #eaecef;
border-radius: 5px;
padding: 20px;
box-sizing: border-box;
}
label{
font-size: 14px;
font-weight: 600;
}
.basic-input{
margin-top: 10px;
box-sizing: border-box;
width: 100%;
border: 1px solid #eaecef;
border-radius: 3px;
height: 26px;
}
.basic-input-submit{
margin-top: 20px;
background-color: var(--color-login-btn);
text-decoration: none;
width: 100%;
height: 32px;
color: #ffffff;
border: 0;
border-radius: 3px;
}
.basic-input-submit:hover{
background-color: var(--color-login-btn-hover);
cursor: pointer;
}
</style>
</head>
<!-- body-->
<body>
<form method="GET" action="/login" name="user-login" class="login-form">
<label>Username or email address></label>
<input name="username" type="text" class="basic-input"/>
<label>Password</label>
<input name="password" type="password" class="basic-input"/>
<input type="submit" value="Sign In" class="basic-input-submit"/>
</form>
</body>
</html>
728x90
LIST
'Front > Html, css,jsp' 카테고리의 다른 글
| 20201110_33 server... (0) | 2020.11.10 |
|---|---|
| 20201110_ 33 css (0) | 2020.11.10 |
| 20201109_ 33 html기본 (0) | 2020.11.09 |
| 20201109_33 html 테이블,이미지,문서 (0) | 2020.11.09 |
| 201109_33 설치환경(vscode & git연동) (0) | 2020.11.09 |
댓글