SITE
배너 타입 01
코빈_
2022. 9. 5. 18:04
배너 타입 구조 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;
}