02. 카드 유형-2

728x90

카드유형2

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

원본 사이트 보기

원본 소스 보기

레이아웃 설정

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

HTML

html 소스입니다.

<body>
    <section id="cardType02" class="card__wrap gmark section gray">
        <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>
            <article class="card">
                <img src="img/card_bg02_02.jpg" alt="앵무새">
                <h3 class="tit">목도리앵무</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_03.jpg" alt="앵무새">
                <h3 class="tit">왕관앵무</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_04.jpg" alt="앵무새">
                <h3 class="tit">모란앵무</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_05.jpg" alt="앵무새">
                <h3 class="tit">왕관앵무</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_06.jpg" alt="앵무새">
                <h3 class="tit">코뉴어</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_07.jpg" alt="앵무새">
                <h3 class="tit">코카투</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
            <article class="card">
                <img src="img/card_bg02_08.jpg" alt="앵무새">
                <h3 class="tit">회색앵무</h3>
                <p class="desc">멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다.
                화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다.</p>
                <a href="#" class="more"><span class="iR">더보기</span></a>
            </article>
        </div>
    </section>
    
</body>

CSS

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

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

.gmark {
    font-family: GmarketSans;
    font-weight: 500;
}
 /* 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;
}

.gray {
    background-color: #f5f5f5;
}
/* iR 효과(이미지 대체 효과 == alt) 
    이미지 대체 텍스트 제공을 위한 css 기법. 웹 접근성을 위해 사용하는 방법입니다.*/
.iR {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* cardType02 */

.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;
    padding-right: 20px;
}
.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;
    background-image: url(img/arrow.svg);
    display: block;
    position: absolute;
    right: 0;
    top: 230px;
    border-radius: 5px;
}

※iR 효과※

iR 효과(이미지 대체 효과 == alt)
이미지 대체 텍스트 제공을 위한 css 기법. 웹 접근성을 위해 사용하는 방법입니다.

※말줄임 효과※

- 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다.
- 영역을 넘어가게 되면 ... 으로 표시됩니다.
- 말줄임 효과를 적용하고 싶은 영역에 아래 태그를 넣습니다.

한 줄 효과

{
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

두 줄 효과

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

세 줄 효과

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}