사이트유형 | 카드 유형

사이트 유형 | 카드유형

모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금,
카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다.

---

1.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="고양이 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">고양이 사진</h3>
            <p class="desc">고양이는 너무귀엽습니다 그렇기 저는 고양이가 너무좋아서 고양이 사진을 가지고왔습니다 여러분은 고양이 사진을 보면서 힐링을 하시면 되겠습니다감사합니다.</p>
            <a class="btn"  href="/">
                더 자세히 보기
                <span>
                    <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M80.3536 4.35355C80.5488 4.15829 80.5488 3.84171 80.3536 3.64645L77.1716 0.464466C76.9763 0.269204 76.6597 0.269204 76.4645 0.464466C76.2692 0.659728 76.2692 0.976311 76.4645 1.17157L79.2929 4L76.4645 6.82843C76.2692 7.02369 76.2692 7.34027 76.4645 7.53553C76.6597 7.7308 76.9763 7.7308 77.1716 7.53553L80.3536 4.35355ZM0 4.5H80V3.5H0V4.5Z" fill="black"/>
                    </svg>
                </span>
            </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02.jpg" alt="고양이 사진2">
            </figure>
            <div class="card__body">
                <h3 class="tit">고양이 사진</h3>
            <p class="desc">고양이는 너무귀엽습니다 그렇기 저는 고양이가 너무좋아서 고양이 사진을 가지고왔습니다 여러분은 고양이 사진을 보면서 힐링을 하시면 되겠습니다감사합니다.</p>
            <a class="btn"  href="/">
                더 자세히 보기
                <span aria-hidden="true">
                    <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M80.3536 4.35355C80.5488 4.15829 80.5488 3.84171 80.3536 3.64645L77.1716 0.464466C76.9763 0.269204 76.6597 0.269204 76.4645 0.464466C76.2692 0.659728 76.2692 0.976311 76.4645 1.17157L79.2929 4L76.4645 6.82843C76.2692 7.02369 76.2692 7.34027 76.4645 7.53553C76.6597 7.7308 76.9763 7.7308 77.1716 7.53553L80.3536 4.35355ZM0 4.5H80V3.5H0V4.5Z" fill="black"/>
                    </svg>
                </span>
            </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03.jpg" alt="고양이 사진3">
            </figure>
            <div class="card__body">
                <h3 class="tit">고양이 사진</h3>
            <p class="desc">고양이는 너무귀엽습니다 그렇기 저는 고양이가 너무좋아서 고양이 사진을 가지고왔습니다 여러분은 고양이 사진을 보면서 힐링을 하시면 되겠습니다감사합니다.</p>
            <a class="btn"  href="/">
                더 자세히 보기
                <span>
                    <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M80.3536 4.35355C80.5488 4.15829 80.5488 3.84171 80.3536 3.64645L77.1716 0.464466C76.9763 0.269204 76.6597 0.269204 76.4645 0.464466C76.2692 0.659728 76.2692 0.976311 76.4645 1.17157L79.2929 4L76.4645 6.82843C76.2692 7.02369 76.2692 7.34027 76.4645 7.53553C76.6597 7.7308 76.9763 7.7308 77.1716 7.53553L80.3536 4.35355ZM0 4.5H80V3.5H0V4.5Z" fill="black"/>
                    </svg>
                </span>
            </a>
            </div>
        </article>
    </div>
</section>

---

2.CSS 코드

코드 보기

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: #000;
}
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;
    line-height: 1;
    text-align: center;
    font-weight: 300;
    color: #666;
    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 {
    font-size: 16px;
    margin-bottom: 24px;
}

---

완성본

원본 사이트 보기 원본 소스 보기