사이트제작 - 베너타입

배너타입

홈페이지에 큰 띠를 만들어 광고를 넣을 수 있는 영역입니다.

CSS

/* 여백 초기화 */
body,
div,
dl,
dd,
dt,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
fieldset,
form,
legend,
p,
blockquote,
th,
td,
input,
button,
figure,
figcaption{
    margin: 0;
    padding: 0;
}  

/* 시멘틱 태그 초기화 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
/* font 초기화 */
body,
button,
input,
select,
table,
textarea {
    color: #000;
    font-family: 'NexonLv1Gothic', 'AppleSDGothicNeo-Regular', 'Malgun Gothic', '맑은 고딕', dotum, 돋움;

}
/* 링크 초기화 */
a {
    text-decoration: none;
    color: #000;
}
/* 목록 초기화 */
li,
ol,
ul{
    list-style: none;
}
/* 제목 초기화 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
/* 폰트 스타일 초기화 */
em, address {
    font-style: normal;
}
/* 이미지 초기화 */
img {
    width: 100%;
    vertical-align: top;
}
/* 보더 초기화 */
img, fieldset, button {
    border: 0;
}
/* 클리어 픽스 */
.clearfix {
    zoom: 1;
}
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}
/* 블라인드 효과 */
.blind{
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden
}
/* 이미지 대체(ir)효과 */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;    
}
.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: 24px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 70px;
    }
    .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 .small {
    text-decoration: underline;
    font-size: underline;
    }      

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="페이지 이동"> 많은 질문 부탁드리고 이곳을 클릭해주세요.</a>
        </p>
        <span class="small">배너유형01</span>
    </div>
</section>

결과

깃허브 소스 보기