27. 웹 표준 사이트 만들기(2019) - 팝업

27. 웹 표준 사이트 만들기(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 class="popup">

                      <h4>Advertisement</h4>

                      <ul>

                                 <li><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>

                                 <li><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>

                                 <li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>

                      </ul>

           </div>

           <!-- //팝업 -->

</div>

<!-- //col3 -->

...

 

style.css

/* 로그인 */

/* padding을 안주고 margin을 주는 이유는 padding을 주면 색상이 같이 늘어난다. */

#login-wrap {margin-bottom: 15px; 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;}

 

/* 팝업 */

.popup h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}

.popup ul {overflow: hidden;}

.popup li {float: left; width: 93px; margin-right: 5px;}

.popup li.last {margin-right: 0;}

/* li에 width 영역을 잡아줘서 100%다 차지한다. */

.popup li img {width: 100%;}