카드 유형 01

사이트 만들기 : 카드 유형01

HTML 유형

&ltbody>
    &ltsection id="cardType" class="card__wrap nexon section">
        &lth2>말티즈 강의
        &ltp>우리집 말티즈의 귀여움을 알아보자.
        &ltdiv class="card__inner container">
            &ltarticle class="card">
                
                &ltfigure class="card__header">
                    &ltimg src="img/card_bg01.jpg" alt="웹표준 사이트 만들기">
                &lt/figure>
                &ltdiv class="card__body">
                    &lth3 class="tit">말티즈가 한심하게 처다볼때
                    &ltp class="decs">말티즈는 가끔 아니 자주 주인을 한심하게 처다볼때가 많습니다.성격이 치와와급으로 더럽습니다.자기 마음에 안들면 짖습니다. 간식주면 다 따라갑니다.
                    &lta class="btn" href="/">더 자세히 보기
                &lt/div>
            &lt/article>
            &ltarticle class="card">
                &ltfigure class="card__header">
                    &ltimg src="img/card_bg02.jpg" alt="웹표준 사이트 만들기">
                &lt/figure>
                &ltdiv class="card__body">
                    &lth3 class="tit">말티즈가 산책할때
                    &ltp class="decs">말티즈는 산책을 아주 좋아합니다. 간식을 들고 가도 산책을 더 좋아해서 간식을 처다도 안봅니다.주인이 멈춰도 알아서 자기가 갈길을 갑니다.
                    &lta class="btn" href="/">더 자세히 보기
                &lt/div>
            &lt/article>
            &ltarticle class="card">
                &ltfigure class="card__header">
                    &ltimg src="img/card_bg03.jpg" alt="웹표준 사이트 만들기">
                &lt/figure>
                &ltdiv class="card__body">
                    &lth3 class="tit">말티즈가 간식 달라고 할때
                    &ltp class="decs">말티즈는 간식을 원할 때 주인을 뚫어져라 처다보거나 간식이 있는 곳으로 가 짖습니다.한개만 주면 더 달라고 쪼릅니다. 안주면 주인 다리를 발톱으로 박박 긁습니다.
                    &lta class="btn" href="/">더 자세히 보기
                &lt/div>
            &lt/article>
        &lt/div>

CSS 유형

&ltstyle>
    /* fonst */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }

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

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

    img {
        width: 100%;
    }

    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;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* cartType */
    .card__inner {
        display: flex;
        justify-content: space-between;
    }

    .card {
        width: 32%;
        background: #f5f5f5;
    }

    .card__body {
        padding: 24px;
    }

    .card__body .tit {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .card__body .decs {
        font-size: 18px;
        line-height: 1.4;
        color: #666;
        margin-bottom: 20px;
        font-weight: 300;
    }

    .card__body .btn {}
    &lt/style>

원본 소스 보기