카드 유형 (1)

⭐️ 카드 유형 01 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다.

02. div 만들기

section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다.
큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다.
세부 div 상자를 만들고, 정보의 내용을 입력합니다.

<section id="cardType" class="card__wrap nexon section">     // class 에 card__wrap 경로이고 nexon글자 사용하며, section
    <h2>🏡 우리집 강아지 🐶</h2>
    <p>반려견과 함께하는 행복한 삶에 도움이 되는 자료들을 리스트 합니다.</p>
    <div class="card__inner container">
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg01.jpg" alt="반려견의 다양한 표정 바로알기">      // W3C 준수하기 : 이미지를 볼 수 없는 사용자를 위해 alt 를 꼭 작성해 주어야 함.
            </figure>
            <div class="card__body">
                <h3 class="tit">반려견의 다양한 표정 바로알기</h3>
                <p class="desc">간혹 강아지가 우리를 보며 입꼬리를 올리고, 눈을 반달 모양으로 가늘게 뜨면서 마치 사람이 웃고 있는 표정을 짓기도 하는데요, 과연 웃고 있는 걸까요? 강아지가...</p>
                <a class="btn" href="/">더 자세히 보기</a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg02.jpg" alt="반려견의 문제 행동 파악하기">
            </figure>
            <div class="card__body">
                <h3 class="tit">반려견의 문제 행동 파악하기</h3>
                <p class="desc">말썽쟁이 우리 강아지, 언제 철들까요? 종종 반려인조차 두 손 두 발 다 들었다는 개구쟁이들이 있죠. 강아지 시절에 말썽을 피우는 건 개의 본능이지만, 나이 들어도...</p>
                <a class="btn" href="/">더 자세히 보기</a>
            </div>
        </article>
        <article class="card">
            <figure class="card__header">
                <img src="img/card_bg03.jpg" alt="반려견과의 놀이방법 알아보기">
            </figure>
            <div class="card__body">
                <h3 class="tit">반려견과의 놀이방법 알아보기</h3>
                <p class="desc">놀이훈련은 반려견의 정서적 안정과 지능 발달, 스트레스 해소, 집중력 향상 및 자신감 향상 등을 위해 필수적인 활동 입니다. 반려견의 청각과 후각 능력을 이용한...</p>
                <a class="btn" href="/">더 자세히 보기</a>
            </div>
        </article>
    </div>
</section>

02. style 설정하기

     /* fonts */
    @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: 20px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
    /* cardtype */
    .card__inner {
        display: flex;    /* article 들의 배열 설정 */
        justify-content: space-between;   /* 화면 비율에 따른 간격 맞춤 */
    }
    .card {
        width: 32%;
        background: #f5f5f5;
    }
    .card__body {
        padding: 24px;
    }
    .card__body .tit {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .card__body .desc {
        font-size: 18px;
        line-height: 1.4;
        color: #666;
        margin-bottom: 20px;
        font-weight: 300;
    }
    .card__body .btn {}

03. 결과보기

☛ 원본 소스 보기