사이트유형 - 배너

배너 유형

배너 유형은 이미지가 제일 큽니다.

---

1.HTML 코드

코드 보기

<section id="bannerType" class="banner__wrap nexon">
  <h2 class="blind">배너 영역</h2>
  <div class="banner__inner">
    <h3 class="title">은하수</h3>
    <p class="desc">
      지구(태양계)에서 관측하는 우리 은하의 단면의 모습이다.
      <a href="" title="새로운페이지열림" target="_blank">syumay.tistory.com</a>
    </p>
    <span class="small">배너 유형01</span>
  </div>
</section>

---

2.CSS 코드

코드 보기

.banner__inner {
  background-image: url(../img/banner_bg01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  padding: 120px 0;
  color: #fff;
}
.banner__inner .title {
  font-size: 50px;
  line-height: 1;
  font-weight: 300;
  margin-bottom: 40px;
}
.banner__inner .desc {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 70px;
}
.banner__inner .small {
  font-size: 16px;
  text-decoration: underline;
}

.banner__inner .desc a {
  color: #fff;
  display: block;
}
.banner__inner .desc a :hover {
  text-decoration: underline;
}

---

완성본

원본 사이트 보기 원본 소스 보기