카드 타입 01

카드 타입 사이트 01

사이트에 기초적인 구조를 가진 카드 타입 사이트를 만들어 봅시다.

Site HTML

사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다.

    <section id="cardType" class="card__wrap nexon section">
        <h2>POTTERY</h2>
        <p>‘POTTERY’, 포터리라는 이름은 도자기를 의미합니다.</p>
        <div class="card__inner container">
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg01.jpg" alt="포터리">
                </figure>
                <div class="card__body">
                    <h3 class="tit">포터리</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="TPO">
                </figure>
                <div class="card__body">
                    <h3 class="tit">TPO</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="tit">원단</h3>
                    <p class="desc">
                        유니폼은 계절감, 내구성, 그리고 각각의 형태의 본질을 담아야 합니다. 유니폼에 맞는
                        원단이 선택되면 수차례 옷을 만들어냅니다. 일정 기간을 두고 옷을 관찰합니다.
                    </p>
                    <a class="btn" href="/">더 자세히 보기</a>
                </div>
            </article>
        </div>
    </section>

Site CSS

사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다.

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

    /* 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;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* cardType */
    .card__inner {
        display: flex;
        justify-content: space-between;
    }
    .card {
        width: 32%;
        background: #f5f5f5;
    }
    .card__body {
        padding: 24px;
    }
    .card__body .tit {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .card__body .desc {
        font-size: 18px;
        line-height: 1.4;
        color: #666;
        margin-bottom: 20px;
        font-weight: 300;
    }
    .card__body .btn {

    }

코드 원본 보기

결과물

원본 사이트 보기