반응형
사이트 만들기 : 배너 유형01
사이트 만들기 - 배너 유형입니다. 슬라이드 영역과 비슷하게 이미지 영역이 크니 사진 선정이 중요합니다.
HTML
HTML 영역입니다. 제목을 blind 처리해주고, 본문 영역을 설정합니다.
<section id="bannerType" class="banner__wrap">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">저기압 월요일</h3>
<p class="desc">
태풍이 오는 9월 첫 째주 월요일<br>
기분이 너무 저기압이네요...
<a href="/" title="티스토리로 이동">https://sukjun2.tistory.com/</a>
</p>
<span class="small">배너 유형01</span>
</div>
</section>
CSS
CSS 속성은 간단합니다. background를 통한 이미지 삽입과 반복x, 위치는 중앙, 이미지 크기는 테두리에 맞춰 설정되게합니다.
/* bannerType */
.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;
}
반응형
댓글