카드 타입 01

Card type 01

피그마에서 디자인 하여, zeplin을 참고해 만든 카드 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다.

이후 코드로 작성하였습니다.

HTML

카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다.

  <section id="cardType" class="card_wrap nexon section">
    <h2>고양이는 왜이리 귀여운가?</h2>
    <p>아무래도 숨쉬는 것 자체가 귀엽기 때문이겠지요. 알겠습니까? 고양이님을 모시세요 찬양하세요</p>
    
    <div class="card_inner container">
        <article class="card">
            <figure class="card_header">
                <img src="../cardType/img/card_bg01.jpg" alt="고양이가 가만히 있을 때">
            </figure>
            <div class="card_body">
                <h3 class="tit">고양이가 가만히 있을 때</h3>
                <p class="desc">고양이가 가만히 있을 때 조차 너무 귀엽따아 뽀뽀 오백번 갈겨버려 또한 하품하는 거 보셨습니까? 
                    강렬한 이빨 아주 깜찍하다. 혀에 가시가 돋았다는데 찔리고 싶다!</p>
                <a href="/" class="btn">
                    더 자세히 보기 
                    <span aria-hidden="true">
                        <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                        </svg>
                    </span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card_header">
                <img src="../cardType/img/card_bg02.jpg" alt="고양이가 자고 있을 때">
            </figure>
            <div class="card_body">
                <h3 class="tit">고양이가 자고 있을 때</h3>
                <p class="desc">고양이가 자고있을 때 조차 너무 천사처럼 자고 있습니다 원래 천사인데 말이죠? 
                    하아 안되겠다 걍 배방구 구백구십구번 해버려 나의 천사 고양이 발가락도 쩝쩝 먹기</p>
                <a href="/" class="btn">
                    더 자세히 보기
                    <span aria-hidden="true">  <!-- 이미지 읽지 않기 표시 -->
                        <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                        </svg>
                    </span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card_header">
                <img src="../cardType/img/card_bg03.jpg" alt="고양이 사진이 너무 잘찍혔을 때">
            </figure>
            <div class="card_body">
                <h3 class="tit">고양이 사진이 잘 찍혔을 때</h3>
                <p class="desc">내새끼 자랑하고 싶은데 진심인가? 이런 지저스 뒤져스 최고다 딴 사람들이 
                    나의 천사 보면서 칭찬할 생각에 나는 심장이 떨려버린거에요 안할시 죽음이 찾아감. </p>
                <a href="/" class="btn">
                    더 자세히 보기
                    <span aria-hidden="true">
                        <svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
                        </svg>
                    </span>
                </a>
            </div>
        </article>
    </div>
</section>  

CSS

  <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;
    }

    img {
        width: 100%;
    }

    a {
        text-decoration: none;
        color: #000;
    }

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

    /* cardType */
    .card_inner {
        display: flex;
        justify-content: space-between;  /* 가운데 정렬로 맞추기*/
    }
    .card {
        width: 32%;
        background-color: #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 {
    }

</style> 

원본 소스 보여주기

원본 사이트 보여주기