[사이트 제작] 배너(banner)유형을 만들어 봅시다!

🧷 사이트를 제작해보자! [💁🏻‍♀️ 배너 영역 편]

배너란, 홈페이지의 한 쪽에 특정 웹 사이트의 이름이나 내용을 배너 유형은 배너 안에 약간의 글이 적혀 있는 유형으로 이름이나 내용을 부착하여 홍보하는 이미지를 말합니다.

배너 유형을 함께 만들어 보아요❗️

---

🔨 제작 방법

➰ Figma 사용

사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다.
figma를 이용하여 그리드를 통해 해당 영역을 설정해줄 수 있습니다.

➰ vscode를 통해 코딩해주기! : HTML편

레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.

<section id="bannerType" class="banner__wrap">
    <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>

➰ vscode를 통해 코딩해주기! : CSS편

style을 통해 CSS를 설정해줍니다.
하나하나 세심하게 스타일을 넣어주는 것이 중요합니다.

/* 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;
}

▶완성본

실제 사이트 보기 원본 소스 보기