메가박스 사이트 만들기 03 - 배너영역

메가박스 사이트 만들기

강의번호 03 - 배너영역

 

완성!

reset.css

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */​

style.css

/*배너*/
.banner_menu{overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px;}
.banner_menu a{color: #fff; font-size: 16px; transition: all 0.3s }
.banner_menu a:hover{color: #c1c1c1}
.banner_menu .bm_left{float: left;}
.banner_menu .bm_left ul{padding-top: 7px;}
.banner_menu .bm_left li{position: relative; display: inline; margin-right: 30px;}
.banner_menu .bm_left li.toral{margin-right: 20px;}
.banner_menu .bm_left li.toral a {font-size: 14px; padding: 3px 10px; display: inline-block; border: 1px solid #fff; transition: all 0.3s}
.banner_menu .bm_left li.toral a:hover{background: #fff;border-color: #000; color: #000}
.banner_menu .bm_right{float: right; overflow: hidden}
.banner_menu .bm_right ul{float: left;}
.banner_menu .bm_right ul:first-child{padding-top: 7px;}
.banner_menu .bm_right li{position: relative; display: inline; text-align: center; margin-right: 20px;}
.banner_menu .bm_right li.line{margin-right: 30px;}
.banner_menu .bm_right li.white{margin-right: 10px;}
.banner_menu .bm_right li.white a{width: 80px; background-color: #fff; color: #3a0e6a; padding: 7px 30px 9px 30px; border: 1px solid #fff; display: inline-block}
.banner_menu .bm_right li.purple {margin-right: 0;}
.banner_menu .bm_right li.purple a {width: 80px; background-color: #3a0e6a; color: #fff; padding: 7px 30px 9px 30px; border: 1px solid #6240c4; display: inline-block}
.banner_menu li.line:after{content: ''; width: 1px;height: 14px;background: #fff; position: absolute; right: -18px; top: 2px;}

index.html

<!-- banner -->
    <section id="benner">
       <h2 class="ir_so">최신 영화 소식</h2>
        <div class="banner_menu">
           <div class="container">
               <div class="row">
                   <div class="bm_left">
                       <ul>
                           <li class="toral"><a href="#">전체메뉴</a></li>
                           <li class="line"><a href="#">필름 소사이어티</a></li>
                           <li><a href="#">클래식 소사이어티</a></li>
                       </ul>
                   </div>
                   <div class="bm_right">
                       <ul>
                           <li class="line"><a href="#">고객센터</a></li>
                           <li class="line"><a href="#">맴버쉽</a></li>
                           <li><a href="#">VIP</a></li>
                       </ul>
                       <ul>
                           <li class="white"><a href="#">상영시간표</a></li>
                           <li class="purple"><a href="#">빠른 예매</a></li>
                       </ul>
                   </div>
               </div>
           </div>      
        </div>
        <div class="slider">
            <img src="assets/img/main_slider01.jpg" alt="베스와 베라">
        </div>
    </section>
    <!-- //banner -->