초보개발자의 성장블로그
CSS 34 로그인 폼 만들기
프론트엔드/CSS2021. 4. 4. 14:30
① <div> 태그로 로그인 전체 박스를 먼저 만든다. 다음 <form>태그
② <h2> 태그로 Member-Login 입력한다.
③ <ul> 태그로 <li> (ID, PW) ,<li> 로그인을 리스트로 만든다
이 때, <li>(ID, PW)는 <ul>태그안의 <li>ID, <li>PW로 만들어준다.
④ <ul>태그로 <li>회원가입, <li> 아이디/비밀번호 찾기를 만들어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type: none;
}
body{
font-family: "맑은 고딕","돋움";
font-size:12px;
color:#444444;
}
#login_box{
width:220px;
height:120px;
border:solid 1px #bbbbbb;
border-radius: 15px;
margin:10px 0 0 10px;
padding:10px 0 0 15px;
}
h2{
font-family:"Arial";
margin-bottom:10px;
}
#login_box input{
width:100px;
height:18px;
}
#id_pass,#login_btn{
display:inline-block;
vertical-align:top;
}
#id_pass span{
display: inline-block;
width:20px;
}
#pass{
margin-top:3px;
}
#login_btn button{
margin-left:5px;
padding:12px;
border-radius: 5px;
}
#btns{
margin:12px 0 0 0;
text-decoration: underline;
}
#btns li{
margin-left: 10px;
display:inline;
}
</style>
</head>
<body>
<form>
<div id="login_box">
<h2>Member-Login</h2>
<ul id="input_button">
<li id="id_pass">
<ul>
<li>
<span>ID</span>
<input type="text">
</li>
<li id="pass">
<span>PW</span>
<input type="password">
</li>
</ul>
</li>
<li id="login_btn">
<button>로그인</button>
</li>
</ul>
<ul id="btns">
<li>회원가입</li>
<li>아이디/비밀번호 찾기</li>
</ul>
</div>
</form>
</body>
</html>
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 36 opacity로 불투명도 속성을 주기 (0) | 2021.04.04 |
|---|---|
| CSS 35 회원가입 폼 만들기 (2) | 2021.04.04 |
| CSS 33 table 꾸미기 (2) | 2021.04.04 |
| CSS 32 z-index 속성 (0) | 2021.04.04 |
| CSS 31 position 속성 (0) | 2021.04.04 |
댓글()