[SITE] 웹사이트 - 배너 유형01

BannerType01

웹페이지 실습을 위한 배너 유형을 실습해보겠습니다! 이번 배너 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다.
그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆

---

< figma : 디자인 하기 >

이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

TIP !
• 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다.
• 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용자 눈에 보이지 않도록 블라인드 속성을 주기 위해 선택자로 블라인드를 설정합니다.
• 이너(이미지 삽입) | 제목 | 텍스트(텍스트, 링크) | 텍스트(머리말) 구조로 큰 틀을 설정합니다.

<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="고양이 보러가기">다들 고양이 자랑과 이미지 보고 가세요.</a>
        </p>
        <span class="small">배너 유형 01</span>
    </div>
</section>

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
• 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋습니다.
• 각 영역과 섹션에 반복적으로 들어가는 속성들은 공통 속성으로 따로 설정하는 것이 좋습니다.
• 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킵니다.
• span 태그는 display: block를 먼저 설정하여 작업하는 것이 편리합니다.
• 이미지는 background: url()을 이용하여 배경에 삽입합니다.

/* font */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
em,
i,
address {
    font-style: normal;
}
li {
    list-style: none;
}
.blind{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
.gray {
    background-color: #f5f5f5;
}

/* bannerType */

.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 {
    display: block
    font-size: 16px;
    text-decoration: underline;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기