카드 유형 (2)

⭐️ 카드 유형 02 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다.

02. div 만들기

section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다.
큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다.
세부 div 상자를 만들고, 정보의 내용을 입력합니다.

<section id="cardType" class="card__wrap Gmarket section">
    <h2>인테리어 둘러보기</h2>
    <p>인테리어 디자인을 위한 이미지 모음 자료 입니다. <br>
        라이프 스타일에 따라 나눠진 다양한 디자인을 살펴보세요. 💁🏽</p>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg04.jpg" alt="북유럽 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    북유럽 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">북유럽 기후에 맞게 화이트 컬러를 기본으로 강한 그레이나 블랙을 포인트로 주는 것이 특징이며, 실용...</p>

            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg05.jpg" alt="웨인스코팅 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    웨인스코팅 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">웨인스코팅은 벽의 일정 부분을 사각 프레임 형태로 패널을 덧대는 시공법으로, 클래식한 분위기에서 현...</p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg06.jpg" alt="프렌치 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    프렌치 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">프렌치 시크의 자연스러우면서도 편안한 감성을 재해석한 디자인으로, 고전적이고 로맨틱한 느낌의...</p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg07.jpg" alt="플랜테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    플랜테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">식물이 가지고 있는 초록색으로 자연친화적이고 내추럴한 포인트를 준 인테리어로, 힐링의 요소를...</p>
            </div>
        </article>
    </div>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg08.jpg" alt="모던 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    모던 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">모던은 도시적, 현대적, 세련됨을 뜻하며, 모던 인테리어에서는 난색계열 보다는 무채색을 많이 사용하...</p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg09.jpg" alt="미니멀 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    미니멀 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">19세기 초의 모더니즘이 발전된 형태로, 최대한 장식을 배제하고 간결하고 간소화한 특징을 가지는 인...</p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg10.jpg" alt="빈티지 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    빈티지 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">빈티지는 와인 용어에서 유래된 단어로, 오래되고 낡은 형태를 뜻합니다. 시간이 지난 빛바랜 용품들로...</p>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg11.jpg" alt="인더스트리얼 인테리어">
            </figure>
            <div class="card__body">
                <h3 class="tit">
                    인더스트리얼 인테리어
                    <a class="btn" href="/">
                        <span aria-hidden="true">              
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 5C0 2.23858 2.23858 0 5 0H23C25.7614 0 28 2.23858 28 5V23C28 25.7614 25.7614 28 23 28H5C2.23858 28 0 25.7614 0 23V5Z" fill="#C59980"/>
                                <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44772 15 7 15V13ZM21.7071 14.7071C22.0976 14.3166 22.0976 13.6834 21.7071 13.2929L15.3431 6.92893C14.9526 6.53841 14.3195 6.53841 13.9289 6.92893C13.5384 7.31946 13.5384 7.95262 13.9289 8.34315L19.5858 14L13.9289 19.6569C13.5384 20.0474 13.5384 20.6805 13.9289 21.0711C14.3195 21.4616 14.9526 21.4616 15.3431 21.0711L21.7071 14.7071ZM7 15H21V13H7V15Z" fill="white"/>
                            </svg>
                        </span>
                    </a>
                </h3>
                <p class="desc">거친 느낌의 창고나 공장의 느낌이 가미된 빈티지 인테리어로, 다소 어둡지만 묵직하고 강한 인상을...</p>
            </div>
        </article>
    </div>
</section>

02. style 설정하기

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

    .Gmarket {                         /* 폰트 변경 */
        font-family: 'GmarketSans';
        font-weight: 400;
    }
    
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    .img {
        width: 100%;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    /* 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;
        margin-bottom: 20px;
        text-align: center;
    }
    .section > p {
        font-size: 22px;
        font-weight: 200;
        line-height: 1.2;
        margin-bottom: 70px;
        color: #666;
        text-align: center;
    }

    /* cardtype */
    .card {
        width: 275px;
        background-color: #fff;
    }
    .card__inner {
        display: flex;
        justify-content: space-between;
    }
    .card__header{
        padding-bottom: 20px;
    }
    .card__body {
        margin-bottom: 50px;
    }
    .card__body .tit {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 10px;
        position: relative;   /* 화살표 위치 설정 */
    }
    .card__body .desc {
        font-size: 18px;
        font-weight: 100;
        line-height: 1.4;
        color: #666;
    }
    .card__body .btn {
        position: absolute;     /* 화살표 위치 설정 */
        right: 0;
    }

03. 결과보기

☛ 원본 소스 보기