반응형
간단한 로그인 폼 예제입니다.
결과물)
login.html
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>
<link rel="stylesheet" href="./style3.css">
</head>
<body>
<table>
<tr>
<td>
<input type="text" name="" id="" placeholder="아이디 or 이메일" required></td>
<th rowspan="2"><input type="button" value="로그인" id="login"></th>
</tr>
<tr><td><input type="text" placeholder="비밀번호" required></td></tr>
</table>
<div>
<input type="checkbox" name="" id="login_save"><label for="login_save">로그인 상태 유지</label>
<input type="checkbox" name="" id="id_save"><label for="id_save">아이디 저장</label>
</div>
<div id="information">
<p><h6 id="first">개인정보보호를 위해</h6> <h6>개인PC에서 사용해주세요.</h6></p>
</div>
<br> <br>
<div>
<input type="button" value="아이디 찾기" id="id_btn">
<input type="button" value="비밀번호 찾기" id="pass_btn">
<input type="button" value="회원가입" id="sign">
</div>
</body>
</html>
style3.css
h6{
display: inline;
color: red;
font-size: smaller;
}
p{
font-size: small;
display: inline;
}
#first{
font-size: smaller;
color: rgb(54, 54, 54);
}
#information{
font-size: small;
border: 1px solid black;
display: inline;
}
#login{
margin-left: 5px;
height:100%;
width: 100%;
background-color: red;
color: white;
font-size: large;
font-weight: bold;
border: 1px solid pink;
border-radius: 3px;
}
td{
height: 30px;
width:230px;
}
th{
height: 60px;
width: 80px;
}
input[type=text]{
height: 100%;
width: 100%;
}
label{
font-size: smaller;
}
#sign{
background-color: gray;
color: white;
}
#id_btn,#pass_btn{
color: black;
background-color: white;
}
input[type=button]{
border: 1px solid gray;
font-size: small;
}
결과
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] box-sizing (0) | 2020.09.03 |
|---|---|
| [CSS] reset.css (0) | 2020.09.02 |
| [CSS]텍스트에 줄 긋기 (0) | 2020.09.02 |
| [HTML/CSS]네이버 메인화면 무작정 따라 만들어보기(레이아웃잡기 연습) (0) | 2020.08.17 |
| [HTML/CSS] CSS 스타일 적용 (0) | 2020.08.14 |
