로그인을 하는 입력 form을 만들어보았습니다.
허접하지만... 로그인 레이아웃을 이렇게 짠다는 것을 기록하기 위해 글을 남깁니다.
로그인 버튼은 따로 저장해둔 이미지입니다.
<style type="text/css">
* { margin:0; padding: 0; }
body{
font-family: "맑은 고딕";
font-size: 0.75em;
color: #333;
}
#login-form{
width:200px;
margin:100px auto;
border: 1px solid gray;
border-radius: 5px;
padding: 15px;
}
/* inline이였던 요소들을 block으로 바꿈 */
#login-form input, #login-form label{
display:block;
}
#login-form label{
margin-top: 10px;
}
#login-form input{
margin-top: 5px;
}
/* 애트리뷰트 선택자 */
#login-form input[type='image']{
margin: 10px auto;
}
</style>
<body>
<form id="login-form" method="post">
<label class="legend">아이디</label>
<input name="userid" type="text">
<label class="legend">패스워드</label>
<input name="passwprd" type="password">
<input type="image" src="images/login.png" value="로그인">
</form>
</body>
'웹 프로그래밍 > ------ CSS' 카테고리의 다른 글
| [CSS] float(2) - 레이아웃 ( Holy Grail Layout ) (1) | 2018.04.04 |
|---|---|
| [CSS] float(1) - 개념 (0) | 2018.04.04 |
| [CSS] 포지션( Position ) 개념 (0) | 2018.04.04 |
| [CSS 활용] 상단 탭( TAB ) 예제 (0) | 2018.04.04 |
| [CSS 활용] 게시판 레이아웃 예제 (0) | 2018.04.04 |
| [CSS] 폰트( 제곱표현, 말줄임 ) (0) | 2018.04.04 |
| [CSS] 복합 셀렉터 (0) | 2018.04.04 |