사이트 만들기03

Figma

피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다.

---

HTML 코드

웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입해 코드를 정리합니다.

코드보기

<section id="cardType03" class="card__wrap score section">
    <h2 class="blind">건축의 세계</h2>
    <!--class를 통해 blind 효과 사용-->
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_01.jpg" alt="">
                <figcaption>Washing</figcaption>
            </figure>
            <div class="card__contents">
                <h3>다들 손을 씻고 계신가요? 손을 씻는다는것은 참 중요한 문제이며 인류가 해결해야할</h3>
                <p>손을 씻는것은 상당히 중요한 행동입니다, 손을 씻음으로써 병을 예방할 수 있고 각종 미세먼지와 세균에서 벗어날 수 있기 때문에 되도록이면 모두들</p>
            </div>
            <div class="card__footer">
                <h4>dr. junjun <em>9 resources</em></h4>
                <span><img src="img/card_bg03_icon01.png" alt="Hesperioidea"></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_02.jpg" alt="">
                <figcaption>Carefully</figcaption>
            </figure>
            <div class="card__contents">
                <h3>손을 꼼꼼히 씻고 계신가요? 손을 씻었다 하여도 손에 물이 닿았다는 것만으로도 씻었다고 하시는</h3>
                <p>미국 질병예방통제센터에서는 20초가량 손을 문지르며 구석구석 씻을 것을 권고하였으며 손에 물이 닿았다는 것만으로도 닦았다는 사람들을 위해 올바른 손닦기를 권장하고 있습니다</p>
            </div>
            <div class="card__footer">
                <h4>dr. heck <em>9 resources</em></h4>
                <span><img src="img/card_bg03_icon02.png" alt="Hesperioidea"></span>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03_03.jpg" alt="">
                <figcaption>Just In Time</figcaption>
            </figure>
            <div class="card__contents">
                <h3>약은 절대 거르지 않고 정해진 시간 정해진 날에 꼭 드셔야하며 약사가 정해준 약만 드셔야 합니다</h3>
                <p>약은 꼭 제때제때 드셔야 합니다 안그러면 몸에 항채가 생겨 약의 효과가 나타나지 않을수가 있기 때문에 항상 모든 주의 사항을 준수하면서도 제 시간에 맞게 드시는 습관을 길러야 합니다.</p>
            </div>
            <div class="card__footer">
                <h4>dr. jo <em>9 resources</em></h4>
                <span><img src="img/card_bg03_icon03.png" alt="Hesperioidea"></span>
            </div>
        </article>
    </div>
</section>

---

CSS 코드

폰트는 'SCoreDream'를 이용하고 .card 클래스를 생성해 카드 유형을 구성하고,
각각 .blind, figcaption, :nth-child()를 통해 완성합니다.

/* blind : 제목은 적어야 하나 시각이 불편한 사람들을 위해 숨김처리 */
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    /* 포토샵의 클리핑 마스크와 같은 효과 */
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}ht: 20px;

/*figcaption : figure을 사용한 이미지의 설명에 해당함*/
.card .card__header figcaption {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 16px;
    border-radius: 50px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    color: #7b7b7b;
}

/* :nth-child(번호선택)을 통해 해당 요소에만 스타일을 적용*/
.card__inner .card:nth-child(1) {
    border-right: 1px solid #eee;
}

.card__inner .card:nth-child(2) {
    border-right: 1px solid #eee;
}

코드보기

/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
    font-family: 'SCoreDream';
    font-weight: 300;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
    border-radius: 10px;
}

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 {
    /* ">" 이걸로 section 안에 있는 h2선택 */
    font-size: 50px;
    line-height: 1;
    /* 1이라고 적으면 auto랑 똑같음 */
    text-align: center;
    margin-bottom: 20px;
}

.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* blind : 제목은 적어야 하나 시각이 불편한 사람들을 위해 숨김처리 */
.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    /* 포토샵의 클리핑 마스크와 같은 효과 */
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden
}

/* 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 {}

.card .card__header {
    position: relative;
}

.card .card__header img {
    border-radius: 10px;
    box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.card .card__header figcaption {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 16px;
    border-radius: 50px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    color: #7b7b7b;
}

.card .card__contents {}

.card .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;
    margin-bottom: 30px;
}

.card .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 .card__footer {
    display: flex;
    justify-content: flex-end;
}

.card .card__footer h4 {
    text-align: right;
    color: #188422;
}

.card .card__footer em {
    display: block;
    color: #666;
    font-style: normal;
}

.card .card__footer span{
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50px;
    overflow: hidden;
    display: block;
    margin-left: 10px;
    margin-top: -3px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

---

결과

---

원본 소스 보기

원본 페이지 보기