[사이트 만들기] 카드 유형 섹션 만들기

사이트 만들기 : 카드 유형

이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다.
최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다!

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자.
이번에 만들 웹 사이트의 유형은 카드 유형 섹션이다.

HTML 소스

웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것.
자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것.

<body>
    <section id="cardType" class="card__wrap nexon section">
        <h2>별빛 제빵교실 개강소식🍞</h2>
        <p>별빛 제빵교실이 2022년 8월 23일 개강합니다. 수강신청 기회는 지금 뿐이니 서두르세요!</p>
        <div class="card__inner container">
            <article class="card">
                <!-- 이미지 넣을 때 그냥 img태그 쓰지말고 figure 태그 안에 넣어서 써야 웹표준 준수한거임 -->
                <figure class="card__header">
                    <img src="img/card_bg01.jpg" alt="제빵 기초 강의">
                </figure>
                <div class="card__body">
                    <h3 class="title">제빵 기초 강의</h3>
                    <p class="desc">
                        제빵의 기초가 되는 강의입니다. 초심자도 이해하기 쉽게 강의가 진행되며 
                        초반에는 이론 강의부터 시작해 중반부터는 실습을 시작하여 제빵의 기초를 익히도록 합니다.
                    </p>
                    <a class="btn" href="/">더 자세히 보기</a>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg02.jpg" alt="제빵 심화 과정">
                </figure>
                <div class="card__body">
                    <h3 class="title">제빵 심화 과정</h3>
                    <p class="desc">
                        이제 기초 강의가 너무 쉬워 시시하다고 느껴질 즈음 심화과정에 들어가게 될 겁니다.
                        시중에 판매되고 있는 제과점 빵들을 직접 만들어보는 시간을 갖게 됩니다.
                    </p>
                    <a class="btn" href="/">더 자세히 보기</a>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03.jpg" alt="나만의 제빵 포트폴리오 만들기">
                </figure>
                <div class="card__body">
                    <h3 class="title">나만의 제빵 포트폴리오 만들기</h3>
                    <p class="desc">
                        이제 빵집 창업해도 문제 없을 정도의 실력을 갖추게 되셨을 겁니다! 이제는 능숙해진 제빵 실력에
                        나만의 개성을 더하여 튼튼한 포트폴리오를 만들어보아요!
                    </p>
                    <a class="btn" href="/">더 자세히 보기</a>
                </div>
            </article>
        </div>
    </section>
</body>

CSS 소스

reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다.
자세한 설명은 아래 예시 코드의 주석처리된 내용을 참조할 것.

<style>
    /* fonts */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
    
    .nexon {    
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }

    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;    /* 폰트 굵기 초기화 */
    }
    a {
        text-decoration: none;
        color: #000;    /* 하이퍼링크 밑줄 무효화 */
    }
    img {
        width: 100%;    /* 이미지 튀어나온 거 집어넣기 */
    }

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
    }
    .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;
        text-align: center;
        margin-bottom: 70px;
        color: #666;
    }

    /* cardType */
    .card__inner {
        display: flex;
        justify-content: space-between;     /* 간격 떨어뜨리기 */
    }
    .card {
        width: 32%;     /* 향후 반응형을 위해 백분율로 입력 */
        background: #f5f5f5;
    }
    .card__body {
        padding: 24px;
    }
    .card__body .title {
        font-size: 22px;
        padding-bottom: 10px;
    }
    .card__body .desc {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.4;
        padding-bottom: 20px;
        color: #666;
    }
    .card__body .btn {

    }
</style>

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 (6)	2022.08.20
[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 (2)	2022.08.17
[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 (2)	2022.08.17
[사이트 만들기] 카드 유형 섹션 만들기 심화편 (10)	2022.08.10
[사이트 만들기] 카드(8개) 유형 섹션 만들기 (11)	2022.08.09

코딩공책📚

[사이트 만들기] 카드 유형 섹션 만들기

사이트 만들기 : 카드 유형

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 카드 유형 섹션 만들기

사이트 만들기 : 카드 유형

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바