배너 타입 01

배너 타입 구조 01

사이트에 기초적인 구조를 가진 배너 타입 구조를 만들어 봤습니다.

Site HTML

사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.

    <section id="bannerType" class="banner__wrap nexon">
        <h2 class="blind">배너 영역</h2>
        <div class="banner__inner">
            <h3 class="title">Pottery</h3>
            <p class="desc">
                저희는 비즈니스 캐주얼을 지향하고 있으며,<br>
                언제 어디서든 편안한 룩을 지향합니다.
            </p>
            <span class="small">배너 유형 01</span>
        </div>
    </section>

Site CSS

사이트를 코딩하는 데에 필요한 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;
    }

코드 원본 보기

결과물

원본 사이트 보기