사이트 만들기(카드 유형 - 02)

사이트 만들기(카드 유형 - 02)

카드 형식의 사이트를 제작 할 수 있습니다. 유형02 에서는 8개의 카드가 존재하는 사이트를 보여줍니다.

---

CSS

.gmark {
    font-family: GmarketSans;
    font-weight: 500;
}
.card__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card__inner .card {
    width: 24%;
    position: relative;
}
.card__inner .card:nth-child(1) {
    margin-bottom: 50px;
}
.card__inner .card img {
    margin-bottom: 20px;
    border-radius: 10px;
}
.card__inner .card .tit {
    font-size: 28px;
    margin-bottom: 10px;
    /* 한줄 효과 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card__inner .card .desc {
    font-size: 18px;
    font-weight: 300;
    color: #666;
    line-height: 1.4;
    /* 세줄 효과 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.card__inner .more {
    width: 24px;
    height: 24px;
    background-image: url(img/arrow.svg);
    display: block;
    position: absolute;
    right: 0;
    top: 280px;
    border-radius: 5px;
}

HTML

<section id="cardType" class="card__wrap GmarketSans section">
<h2>고래에대해 알아보자</h2>
<p>
    바다에 사는 다양한 고래들을 사진으로 보고 알아보는 시간을 가져 봅시다.<br>
    고래들의 매력에 빠져보아요
</p>
    <div class="card__inner container">
        <article class="card">
            <img src="img/card_bg02_01.jpg" alt="혹등고래">
            <h3 class="tit">혹등고래</h3>
            <p class="desc">혹등고래는 바다에서 볼 수 있는 고래 중 하나로 바다에 천사라고 불리우는 고래 입니다. 혹등고래는 바다에서 서식하는</p>
            <a href="#" class="more"><span class="ir">더보기</span></a>
        </article>
    </div>
</section>

이미지가 나오지 않을 시 다음과 같은 효과를 넣어 줄 수 있습니다.

/* ir 효과(이미지 대체 효과 == alt) */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}

---

결과

---

원본 소스 보기 페이지 보기