26. 웹 표준 사이트 만들기(2019) - 로그인

26. 웹 표준 사이트 만들기(2019) - 로그인

전체소스

index.html

 

<div class="column col3">

           <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>

           <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>

           <!-- 로그인 -->

           <div id="login-wrap">

                      <h4 class="ir_su">로그인 정보</h4>

                      <form id="login_form" name="login_form" action="post">

                                 <fiedlset>

                                             <legend class="ir_su">로그인 및 관련 설정</legend>

                                             <div class="login_header">

                                                        <h5 class="ir_su">로그인 보안</h5>

                                                        <div class="lh_check">

                                                                   <input id="infor_check" type="checkbox" class="input_check">

                                                                   <label for="infor_check">로그인 상태 유지</label>

                                                        </div>

                                                        <div class="lh_ip">

                                                                   IP보안 <em>ON</em>

                                                        </div>

                                             </div>

                                             <div class="login_content">

                                                        <h5 class="ir_su">로그인 영역</h5>

                                                        <div class="lc_text">

                                                                   <label for="uid" class="ir_su">아이디</label>

                                                                   <input type="text" id="uid" name="uid" class="input_text" maxlength="20">

                                                                   <label for="uid" class="ir_su">비밀번호</label>

                                                                   <input type="password" id="upw" name="upw" class="input_text" maxlength="20">

                                                        </div>

                                                        <button class="lc_btn" type="submit">로그인</button>

                                             </div>

                                             <div class="login_footer">

                                                        <h5 class="ir_su">로그인 문제해결</h5>

                                                        <ul>

                                                                   <li><a href="#"><strong>회원가입</strong></a> / </li>

                                                                   <li><a href="#">아이디</a>&middot;<a href="#">비밀번호 찾기</a></li>

                                                        </ul>

                                             </div>

                                 </fiedlset>

                      </form>

           </div>

           <!-- //로그인 -->

</div>

<!-- //col3 -->

 

style.css

/* 로그인 */

#login_form {background: #f2f4f5; padding: 15px;}

.login_header {overflow: hidden; font-size: 12px; height: 30px;}

.login_header .lh_check {float: left; padding-right: 15px;}

/* vertical-align: -2px;  체크박스와 글자위치조정*/

.login_header .lh_check .input_check{ vertical-align: -2px; }

.login_header .lh_ip {float: left;}

.login_header .lh_ip em {color: #0093bd; text-decoration: underline;}

.login_content {position: relative;}

.login_content .lc_btn {position: absolute; right: 0; top: 0; width: 60px; height: 47px; background: #fff; border: 1px solid #bebebe;}

.login_content .input_text {width: 182px; height: 16px; padding: 2px 5px; border: 1px solid #bebebe; margin-bottom: 3px; background: #fff;}

.login_footer {margin-top: 5px;}

.login_footer li {display: inline;}

.login_footer li a {font-size: 12px;}

 

reset.css

/* 테두리 초기화 */
/* 구 익스9에서 img태그는 테두리가 생긴다. */
img, fieldset {border: 0 none;}