배너 유형 01 한번 만들어 봅시다!

배너 유형_01

배너가 될 구간을 한번 같이 작업해보아요~~~~~!

---

Figma

우선 피그마를 통해 기초적인 틀을 잡습니다!

---

HTML

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="유튜브 페이지로 이동">https://www.youtube.com/channel/UCqVDpXKLmKeBU_yyt_QkItQ/</a>
        </p>
        <span class="small">도시 속 모습_01</span>
    </div>
</section>

CSS

생각보다 구현 요소가 적으므로 붙여줄 살(css코드)도 적습니다.

.banner__inner {
    background-image: url(../img/BANNER-TYPE01.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;
}

---

완성예시

---

원본 소스 보기

원본 페이지 보기