01. 카드 유형-1

카드유형

카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다.

원본 사이트 보기

원본 소스 보기

레이아웃 설정

figma로 그리드와 사이트의 레이아웃을 잡습니다.

HTML

html 소스입니다.

<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="img/card_bg01.jpg" alt="멋진 글을 적어보세요.">
            </figure>
            <div class="card__body">
                <h3 class="tit">멋진 글을 적어보세요.</h3>
                <p class="desc">어떠한 글이 멋진 글이라고 정확히 정할 수는 없습니다만 당신이 쓰는 글이라면 어떤 글이든 멋질 거예요! 연필을 들고 종이에 적어볼까요?</p>
                <a class="btn" href="/">
                    더 자세히 보기
                    <span>
                        <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="img/card_bg02.jpg" alt="당신의 추억을 기록하세요">
            </figure>
            <div class="card__body">
                <h3 class="tit">당신의 추억을 기록하세요</h3>
                <p class="desc">기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요.</p>
                <a class="btn" href="/">
                    더 자세히 보기
                    <span>
                        <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="img/card_bg03.jpg" alt="당신의 추억을 장식하세요">
            </figure>
            <div class="card__body">
                <h3 class="tit">당신의 추억을 장식하세요</h3>
                <p class="desc">당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티커를 붙이세요. 그림을 그리세요. 당신의 추억을 장식하세요. 적절한 장식은 감정을 실감나게
                    표현해줍니다.</p>
                <a class="btn" href="/">
                    더 자세히 보기
                    <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

css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다.

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