사이트유형 | 카드 유형2

사이트 유형 | 카드유형2

모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금,
카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다.
ir은 img태그의 alt를 대신하여 백그라운드 이미지 사용하기위해씁니다.

---

1.HTML 코드

코드 보기

<section id="cardType" class="card__wrap gmarket section gray">
    <h2>강아지 사진</h2>
    <p>여러분은 귀여운 강아지 사진을 보실수 있는 기회가 생겼습니다.<br>
        엄청 귀여운 강아지를 보실수 있어서 기분이 좋을거에요!🐶</p>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_01.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_02.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_03.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_04.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_05.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_06.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_07.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02_08.jpg" alt="강아지 사진1">
            </figure>
            <div class="card__body">
                <h3 class="tit">달리는 강아지</h3>
                <p class="desc">강아지는 너무귀엽습니다 그렇기 저는 강아지가 너무좋아서 강아지 사진을 가지고왔습니다. 엄청 귀엽지않나요? 많이 보세요!!</p>
                <a href="#" class="more">
                    <span class="ir">더보기</span>
                </a>
            </div>
        </article>
    </div>
</section>

---

2.CSS 코드

코드 보기

/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
    font-family: 'GmarketSans';
    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.4;
    text-align: center;
    font-weight: 300;
    color: #666;
    margin-bottom: 70px;
}
.gray {
    background-color: #f5f5f5;
}
/* ir 효과(이미지 대체효과) */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    /* text-indent: -99999px; */
    top: -1000em;
    left: 0;
}
/* cardType */
.card__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card__inner .card {
    width: 24%;
    position: relative;
}
.card__inner .card:first-child {
    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 .card .more {
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    right: 0;
    top: 231px;
    background-image: url(img/arrow.svg);
}

---

완성본

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