배너 유형 사이트 01

사이트 만들기

이번 사이트는 배너 유형입니다.

---

○ 슬라이드 유형 01

배너 유형은 컨텐츠 중간에 긴 가로로 긴 형식으로 삽입되는 유형으로 광고나 홍보용 컨텐츠 등이 자주 들어갑니다.

▶ HTML 파트

<section id="bannerType" class="banner__wrap nexon">
    <h2 class="blind">배너 영역</h2> 
    <div class="banner__inner">
        <h3 class="title">저녁의 와인 한잔</h3>
        <p class="desc">
            오늘 밤은 좋은 무드를 가지고 와인 한잔 어떨까요?<br>
            와인은 포도를 발효시켜 만든 오랜 역사를 가진 양조주입니다.
        </p>
        <span class="small">배너 유형01</span>
    </div>    
</section>

▶ 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 .desc a {
    color: #fff;
    display: block;
}
.banner__inner .desc a:hover {
    text-decoration: underline;
}

.banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
}

※ 완성된 형태

원본 소스 보기