사이트 만들기 : 배너 유형 01
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
이번 시간에 공부해 볼 유형은 배너 유형 입니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
피그마 구도에 맞게 틀을 잡아줍니다.
{
<body>
<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="유튜브페이지로이동">youtube.com</a>
</p>
<span class="small">배너 유형01</span>
</div>
</section> <!-- //bannerType -->
</body>
}
03. 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;
}
}
최종 결과
'Site 만들기' 카테고리의 다른 글
| 종합형 + 반응형 01 (11) | 2022.09.15 |
|---|---|
| 슬라이드 유형 01 (3) | 2022.09.06 |
| 푸터 유형 01 (2) | 2022.09.06 |
| 이미지 / 텍스트 유형 01 (6) | 2022.09.01 |
| 헤더 유형 01 (6) | 2022.09.01 |
댓글