카드 유형01

사이트 만들기 : 카드 유형

Figma를 사용하여 필요한 크기의 프레임을 생성하고, Layout grid로 Columns영역을 잡아 눈금자 기능을 이용하여 px단위로 영역을 나누어줍니다.

HTML

body 내부의 내용으로, 1개의 태그에 3개의 class를 지정하여 효율적인 CSS작성을 할 수 있고,
figure 신규태그 사용과 img태그의 alt를 작성해주어 웹 표준을 준수했습니다.

<section id="cardType" 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="커피 원두 보관/로스팅 방법">
            </figure>
            <div class="card__body">
                <h3 class="tit">커피 원두 보관/로스팅 방법</h3>
                <p class="desc">커피를 만드는데 가장 중요한 재료입니다. 원두에 대한 지식과 맛을 알고, 기본적인 원두 보관방법, 로스팅 방법을 익힙니다. 다양한 자료를 통해 커피에
                    대해서 알아봅니다.</p>
                <a class="btn" href="/">더 자세히 보기</a>
            </div>
        </article>
        <article class="card">
            <figure>
                <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>
                <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>     

CSS

container를 통해 일괄적으로 article의 크기와 중앙 정렬을 시켜주고, display:flex로 카드 태그를 가로 정렬시켜줍니다.
다음 3개의 카드 요소들을 justify-content: space-between;코드로 양쪽으로 일정한 간격으로 정렬 시켜주는 코드를 사용합니다.

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

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

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

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

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

img {
    width: 100%;
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
}

.section {
    background-color: #fff;
    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;
}

/* cardType */
.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 .desc {
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
}

원본 소스 보기 원본 사이트 보기