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

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

카드 형식의 사이트를 제작 할 수 있습니다.

---

피그마 작업

피그마로 만들고자 하는 사이트의 가이드 라인을 잡아 줍니다.

하나의 카드 틀이 완성 되면 컴포넌트를 이용해 원본을 만들어 줍니다.

CSS

CSS보기

/* cardType03 */
body {
    background-color: #2254c3;
}
.card__inner {
    display: flex;
}
.card__inner .card {
    padding: 26px;
    width: 33.3333%;
    background-color: #fff;
}
.card__inner .card:nth-child(1){
    border-right: 1px solid #eee;
}
.card__inner .card:nth-child(2){
    border-right: 1px solid #eee;
}
.card__header {
    position: relative;
}
.card__header img {
    border-radius: 10px;
    box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.card__header figcaption {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 6px 16px;
    border-radius: 50px;
    background-color: #FFD217;
    text-align: center;
    font-size: 14px;
    color: #7b7b7b;
}
.card__contents h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.card__contents p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}
.card__footer {
    display: flex;
    justify-content: flex-end;
}
.card__footer h4 {
    text-align: right;
    color: #dd2a2a;
}
.card__footer em {
    display: block;
    color: #666;
    font-style: normal;
}
.card__footer span {
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin-left: 10px;
    margin-top: -3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

줄 효과

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

줄바꿈을 처리 할때 사용하는 css입니다.

HTML

<section id="cardType03" class="card__wrap score section">
    <h2 class="blind">개에 대하여</h2>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="PUPPY">
                <figcaption>PUPPY</figcaption>
            </figure>
            <div class="card__contents">
                <h3>개는 인류가 최초로 가축으로 삼은 동물로 알려져 있으며, 역사적으로 가장오랫동안 사람과 함께 있었습니다.</h3>
            <p>개는 사냥, 목축, 운송, 경비와 같은 일에 사용되고 있으며, 현대에 이르면서 많은 사람들이 반려동물로 기르는 동물 중 하나 입니다. 강아지 짱입니다.</p>
            </div>
            <div class="card__footer">
                <h4>Dr. Liam <em>개와 사람의 관계</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="Dr. Liam"></span>
            </div>
        </article>
    </div>
</section>

카드 부분을 card__header / card__contents / card__footer 세부분으로 나누어서 작업하면 css 작업을 효과적으로 할 수 있습니다.

<h2> 태그를 사용하는 이유는 <section>이 제목을 포함시키는 시멘틱 태그 이기 때문입니다. 이번 카드 유형에서는 제목이 보이지 않아야 하므로 <h2>에 클래스blind를 추가합니다.

/* blind : 접근성을 위해서 */
.blind {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
}

<figure>

<figure>는 독립적인 콘텐츠를 표현할 때 사용됩니다.

<figcaption>

<figcaption>는 부모<figure>가 포함하는 요소의 콘텐츠의 설명 혹은 범례를 나타낼때 사용할 수 있습니다.

---

결과

---

원본 소스 보기 페이지 보기