728x90
배너유형01
배너유형 만들기에 대해 알아보겠습니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다.
2. 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="유투브 페이지로 이동">youtube.com</a>
</p>
<span class="small">배너 유형01</span>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다.
/* font */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
/* 블라인드 효과 */
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden
}
/* banner */
.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;
}
.banner__inner .title {
font-size: 50px;
line-height: 1;
font-weight: 500;
margin-bottom: 40px;
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 500;
margin-bottom: 70px;
}
.banner__inner .desc a {
display: block;
}
.banner__inner .desc a:hover {
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
text-decoration: underline;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]완성형 01 (4) | 2022.09.14 |
|---|---|
| [웹 사이트 제작]푸터유형 01 (4) | 2022.09.05 |
| [웹 사이트 제작]슬라이드유형 01 (3) | 2022.09.05 |
| [웹 사이트 제작]이미지/텍스트 유형 01 (5) | 2022.09.01 |
| [웹 사이트 제작]헤더유형 01 (4) | 2022.09.01 |
댓글