css 활용 - 카드유형03

결과

카드유형03

이번 유형은 전체 레이아웃을 구성하고 card__inner, card__content, card__footer로 구성하여 사용하여 작업하였습니다

CSS

폰트는 import방식을 사용하여 에스코어드림 폰트를 사용하였습니다. 우선 오른쪽 칸에 선을 주어 적절하게 배치하였습니다. 그리고 알맞은 위치에 이미지와 내용을 배치하도록 했습니다. 사진에 들어가는 animal박스도 figcaption태그에 position을 card__header태그를 기준으로 잡고 배치하였습니다. 또한 웹 표준을 시멘틱 태그 뒤에는 무조건 제목이 와야하지만 눈에 보이지 않게 하기위한 설정을 넣어주었습니다. (네이버 사이트를 참고하였습니다.)

/* 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%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: normal;
    }

    /* common 다른 유형에도 기본적으로 들어감*/
    .container {
        width: 1160px;
        padding: 0 20px 200px;
        margin: 0 auto;
        min-width: 1160px;
        overflow: hidden;
    }

    .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;
    }

    /* 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__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: #fff;
        text-align: center;
        font-size: 14px;
        color: #7b7b7b;
    }

    .card__contents {}

    .card__contents h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 10px;
        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;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
        margin-bottom: 30px;        

    }

    .card__footer {
        display: flex;
        justify-content: end; /* 끝으로 정렬 */
    }

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

    .card__footer em {
        display: block;
        font-style: normal;
        color: #666;
    }
    .card__footer  span {
        width: 40px;
        height: 40px;
    }
    .card__footer  span img {
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 50%;
        margin-left: 10px;
        display: block;
        margin-top: 2px; 
        box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.25);
    }

HTML

HTML입니다. card__header과 card__contents, card__footer로 구성하였습니다.
card__header에는 이미지를 넣고 card__contents에는 정보를 card__footer에는 이름과 사진을 넣었습니다.
img 태그를 사용하여 이미지를 삽입하였습니다.
이미지에 있는 animal 박스는 figcaption태그를 사용하여 배치하였습니다.

<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="animal">
                    <span>Architects</span>
                    <figcaption>animal</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>동물원에 동물을 보고 느끼고 만지고 하는 것이 우리 생활에..</h3>
                    <p>동물에 대해 배우고 각 동물의 특성을 알 수 있다면 동물원에 가서 동물들의 행동을 보고 실제로 확인하면서 더욱 즐길 수 있습니다. 여우는 종류에 따라 사는 곳이 다르며</p></p>
                </div>
                <div class="card__footer">
                    <h4>동물학자 <em>Hesperioidea</em></h4>
                    <span>
                        <img src="img/card_bg03_icon01.png" alt="animal">
                    </span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03_02.jpg" alt="animal">
                    <span>Architects</span>
                    <figcaption>animal</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>여러분들이 정서적으로 안정감을 찾으 수 있을 뿐만 아니라...</h3>
                    <p>동물원을 돌아다니면서 동물의 특징과 식습관을 알아보기 위함이기 때문에 공부를 해서 동물원을 좀 더 재밌고 유익하게 돌아다닐 수 있게 만드는 것이 호랑이를</p>
                </div>
                <div class="card__footer">
                    <h4>동물학자<em>Hesperioidea</em></h4>
                    <span>
                        <img src="img/card_bg03_icon02.png" alt="animal">
                    </span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card_bg03_03.jpg" alt="animal">
                    <span>Architects</span>
                    <figcaption>animal</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>그래도 동물은 위험합니다. 여러분이 동물원에 오셔서 많은 것을 배우..</h3>
                    <p> 여러분은 동물에 대해 얼마나 알고 있으신가요? 동물에 대해 배우고 행동 특성 어떤 생김새를 가지고 있는지 알고 있다면 더욱 유익한 시간이 될 수
                        있습니다.</p>
                </div>
                <div class="card__footer">
                    <h4>동물학자 <em>Hesperioidea</em></h4>
                    <span>
                        <img src="img/card_bg03_icon03.png" alt="animal">
                    </span>
                </div>
            </article>
        </div>
    </section>

깃허브 소스 보기

원본 사이트 보기

반응형

'사이트 제작' 카테고리의 다른 글

CSS 활용 - 이미지 유형03  (4)	2022.08.21
CSS활용 - 이미지 유형02  (3)	2022.08.21
CSS활용 - 이미지 유형01  (3)	2022.08.21
css 활용 - 카드유형02  (8)	2022.08.09
css 활용 - 카드유형01  (5)	2022.08.09