사이트 유형 - 카드 유형03

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

사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다.

---

원본 소스 보기 원본 사이트

---

Figma

코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다.
컴포넌트를 만들어서 원본을 이용하여 작업하면 중복되는 작업을 간단히 할 수 있습니다.

컴포넌트 단축어

⌥⌘ K	컴포넌트 만들기
⌥⌘ B	컴포넌트에서 분리하기 (복제한 컴포넌트는 일반 프레임 혹은 레이어로 돌아감, 메인 컴포넌트는 해제)
⌥	컴포넌트 교체하기 (컴포넌트끼리만 가능)

 

---

CSS

nth-child()를 사용해서 필요한 곳에만 부여합니다.
활용하여 중간에 생기는 선을 만들었습니다.
.card__inner .card:nth-child(n) { border-right: 1px solid #000;
section은 시멘틱 태그라서 h태그을 넣어줘야합니다.
하지만 보이지 않아야 하기에 class="blind"를 부여하여 가려줍니다.
footer는 justify-content: flex-end;를 사용하여 뒤쪽부터 정렬하여 오른쪽으로 배치합니다.

blind

시각적으로 보이지 않게 blind 속성을 css에 부여합니다.

.blind {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
}

clip으로 영역을 지정하고, 모든 위치를 0으로 적용합니다. width, height를 1. margin을 -1로 적용하고, overflow:hidden을 사용하여 넘는 부분은 표현하지 않게합니다.

/* 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;
    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 {
    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: #9B99FF;
}

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

.card__inner .card:nth-child(2) {
    border-right: 1px solid #000;
}

.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: #000;
}

.card__contents h3 {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card__contents p {
    color: #666;
    font-size: 18px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 30px;
}

.card__footer {
    display: flex;
    justify-content: flex-end;
}

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

.card__footer em {
    display: block;
    color: #666666;
    font-style: normal;
}

.card__footer span {
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin-left: 10px;
    margin-top: -3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

HTML

이전의 레이아웃 방식처럼 구성합니다. 제목을 구성하는 것을 만든 다음
컨테이너로 묶어 주고, 카드별로 헤더, 콘텐츠, 푸터를 만들어서 구성합니다.
이미지는 span으로 묶어줍니다. 이미지가 없을 경우 무엇인지 확인을 하기 위한 alt태그를 넣어줍니다.

<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="영화">
            <figcaption>movie</figcaption>
        </figure>
        <div class="card__contents">
            <h3>영화에 대해<br>
                알아봅시다.
            </h3>
            <p>
                장면을 연속적으로 촬영하여<br>
                기록한 동영상을, 어떤 내용을<br>
                전달하게끔 꾸며서 만든 영상물.
            </p>
        </div>
        <div class="card__footer">
            <h4>Mr.k <em>movie</em></h4>
            <span>
                <img src="img/card_bg03_icon01.png" alt="face">
            </span>
        </div>
    </article>
    <article class="card">
        <figure class="card__header">
            <img src="img/card_bg03_02.jpg" alt="영화">
            <figcaption>movie</figcaption>
        </figure>
        <div class="card__contents">
            <h3>영화에 대해<br>
                알아봅시다.
            </h3>
            <p>
                장면을 연속적으로 촬영하여<br>
                기록한 동영상을, 어떤 내용을<br>
                전달하게끔 꾸며서 만든 영상물.
            </p>
        </div>
        <div class="card__footer">
            <h4>Mr.k <em>movie</em></h4>
            <span>
                <img src="img/card_bg03_icon01.png" alt="face">
            </span>
        </div>
    </article>
    <article class="card">
        <figure class="card__header">
            <img src="img/card_bg03_03.jpg" alt="영화">
            <figcaption>movie</figcaption>
        </figure>
        <div class="card__contents">
            <h3>영화에 대해<br>
                알아봅시다.
            </h3>
            <p>
                장면을 연속적으로 촬영하여<br>
                기록한 동영상을, 어떤 내용을<br>
                전달하게끔 꾸며서 만든 영상물.
            </p>
        </div>
        <div class="card__footer">
            <h4>Mr.k <em>movie</em></h4>
            <span>
                <img src="img/card_bg03_icon01.png" alt="face">
            </span>
        </div>
    </article>
</div>
</section>