웹사이트 만들기 : 배너 유형 레이아웃01

레이아웃 : 배너 유형01

다음과 같은 배너 유형의 레이아웃을 작업해 보도록 하겠습니다.

HTML 소스

배너 유형은 아주 간단합니다. banner__inner 클래스를 가진 부모 div 박스에 백그라운드로 이미지를 삽입하고, 제목과 하위 메시지를 작성하면 완성입니다.

<section id="bannerType" class="banner__wrap nexon section">
    <h2 class="blind">배너 영역</h2>
    <div class="banner__inner">
        <h3 class="title">귀여운 댕댕</h3>
        <p class="desc">
            더 다양한 댕댕이는 유튜브로 보세요.
            <a href="#" title="유튜브 페이지로 이동">yotube.com</a>
        </p>
        <span class="small">배너 유형01</span>
    </div>
</section>

CSS 소스

/* bannerType */
.banner__inner {
    background-image: url(img/banner01_bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
    color: black;
}
.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: black;
    display: block;
}
.banner__inner .desc a:hover {
    text-decoration: underline;
}
.banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
}

결과

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