로그인 폼을 마크업하는 방법을 아주~ 간단하게 배워보겠습니다 ^^

코딩 방식은 지극히(?) 개인적인 방법인 것을 알아두셨으면 좋겠습니다.

코딩 순서 : HTML 코딩 → CSS 코딩

[HTML 코딩]

    

    
로그인
        

            

                아이디
                
            
            

                비밀번호
                
            
        
        

            
            아이디 저장
        
        

            
        
    

[CSS 코딩]

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Customize */
legend { display:none; }
label { vertical-align:-1px; }
.checkbox { width:13px; height:13px; vertical-align:middle; margin:0; padding:0; }
#frm_login { position:relative; width:300px; height:85px; padding:10px; border:1px solid #ccc; font-size:12px; }
#frm_login p { height:24px; margin-bottom:5px; }
#frm_login .lbl_login { float:left; width:60px; line-height:200%; }
#frm_login .input { height:18px; border:1px solid #ccc; outline:none; }
#frm_login .input:focus { border:1px solid #cc0000; }
#frm_login #area_check_login { clear:both; position:absolute; bottom:10px; left:10px; }
#frm_login #area_button #btn_login { position:absolute; top:10px; left:230px; width:80px; height:51px; background-color:#302f2f; border:1px solid #302f2f; color:#fff; }

[ 결과 ]

[ 개선하여야 할 사항 ]

- 호환성보기로 IE7에서 볼 경우, 살짝 디자인이 틀어지는 부분이 존재하는데, 이에 대한 해법은 아직 연구중