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

megabox04

배너 영역

ir 효과

대체 텍스트를 제공합니다.
(background를 통해 이미지를 표현하면 대체 문자를 표현할 수 없습니다.)

결과

HTML

<section id="banner">
  <h2 class="ir_so">최신 영화 소식</h2>
  <div class="banner_menu">
    <div class="container">
      <div class="row">
        <div class="bm_left">
          <ul>
            <li class="total"><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 -->

 

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 ul li {
  display: inline;
  position: relative;
  margin-right: 30px;
}

.banner_menu .bm_left ul li.total {
  margin-right: 20px;
}

.banner_menu .bm_left ul li.total a {
  font-size: 14px;
  padding: 3px 10px;
  display: inline-block;
  border: 1px solid #fff;
  transition: all 0.3s;
}

.banner_menu .bm_left ul li.total 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;
  display: inline-block;
  border: 1px solid #fff;
}

.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;
  display: inline-block;
  border: 1px solid #6e40c4;
}

.banner_menu li.line:after {
  content: '';
  width: 1px;
  height: 14px;
  background: #fff;
  position: absolute;
  right: -18px;
  top: 2px;
}

 

reset.css (기존 reset 파일에 추가한다.)

/* IR 효과 */

/* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_so {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

 

출력