[사이트 만들기] 배너 유형 01

사이트 만들기 : 배너 유형 STUDY 01

이번 포스팅에서는 Figma에서 만든 배너 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다.

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것.

HTML 소스

웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것.

<body>
    <section id="bannerType" class="banner__wrap nexon section">
        <h2 class="blind">배너 영역</h2>
        <div class="banner__inner">
            <h3 class="title">김제빵 유튜브</h3>
            <p class="desc">
                더 다양한 강의는 유튜브를 통해 제공하고 있습니다.
                <a href="https://www.youtube.com/c/CozyRain" title="유튜브 페이지로 이동">https://www.youtube.com/c/kim_baking</a>
            </p>
            <span class="small">배너 유형 01</span>
        </div>
    </section>
    <!-- // bannerType -->
</body>

CSS 소스

이미지 출력은 background-image : url로 해주도록 한다. CSS 공통 요소, 폰트 정보 등은 따로 빼 놓았기 때문에 자세히 보고 싶다면 하단의 CSS 소스 보기 버튼을 누를 것.

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

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 실전 유형 01 (4)	2022.09.13
[사이트 만들기] 푸터 유형 01 (7)	2022.09.05
[사이트 만들기] 슬라이드 유형 01 (7)	2022.09.05
[사이트 만들기] 이미지/텍스트 유형 01 (8)	2022.09.01
[사이트 만들기] 헤더 유형 01 (4)	2022.09.01

코딩공책📚

[사이트 만들기] 배너 유형 01

사이트 만들기 : 배너 유형 STUDY 01

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 배너 유형 01

사이트 만들기 : 배너 유형 STUDY 01

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바