css 활용 - 카드유형01

결과

카드유형02

이전보다 카드가 늘어나서 변수가 많아졌습니다. 또한 화살표박스도 생겼습니다. 추가된 소스들을 배치해 주도록 하겠습니다.

CSS

css입니다. 폰트를 설정하고 초기 상태를 margin: 0;, padding: 0; 으로 설정합니다.
img를 100%로 범위를 설정하고 container로 전체 범위를 설정하고 justify-content: space-between;로 비율대로 배열해주는 코드를 사용합니다.

.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;
    min-width: 1160px;
}

.section {
    padding: 120px 0;

}

.section>h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}

.section>p {     // > 선택자는 section의 바로 아래 자식 선택자를 불러온다. (코드가 복잡해지면 엉킬 수 있기 떄문에 사용해준다.)
    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;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #666;
    font-weight: 300;
}

.card__body .btn {}

HTML

HTML을 사용했습니다. header,article에서는 이미지를 구성하였고 body,figure 에서는 내용을 구성하였습니다. img 태그를 사용해서 사진을 삽입하였고 svg파일을 삽입해서 화살표도 표현하였습니다.

<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="/">
            더 자세히 보기
            <span aria-hidden="true">
                <svg width="58" height="8" viewBox="0 0 58 8" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M57.3536 4.35355C57.5488 4.15829 57.5488 3.84171 57.3536 3.64645L54.1716 0.464466C53.9763 0.269204 53.6597 0.269204 53.4645 0.464466C53.2692 0.659728 53.2692 0.976311 53.4645 1.17157L56.2929 4L53.4645 6.82843C53.2692 7.02369 53.2692 7.34027 53.4645 7.53553C53.6597 7.7308 53.9763 7.7308 54.1716 7.53553L57.3536 4.35355ZM0 4.5H57V3.5H0V4.5Z"
                        fill="black" />
                </svg>
            </span>
        </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="/">
            더 자세히 보기
            <span aria-hidden="true">
                <!-- 웹표준을 준수하기위해 보이스가 읽지 않도록 해줌 -->
                <svg width="58" height="8" viewBox="0 0 58 8" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M57.3536 4.35355C57.5488 4.15829 57.5488 3.84171 57.3536 3.64645L54.1716 0.464466C53.9763 0.269204 53.6597 0.269204 53.4645 0.464466C53.2692 0.659728 53.2692 0.976311 53.4645 1.17157L56.2929 4L53.4645 6.82843C53.2692 7.02369 53.2692 7.34027 53.4645 7.53553C53.6597 7.7308 53.9763 7.7308 54.1716 7.53553L57.3536 4.35355ZM0 4.5H57V3.5H0V4.5Z"
                        fill="black" />
                </svg>
            </span>

        </a>
    </div>
</article>

결과

깃허브 소스 보기