[사이트 만들기] 카드 유형 섹션 만들기 심화편

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

이번 포스팅에서는 Figma에서 만든 카드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다.
최대한 웹 표준을 준수하기 위해 시맨틱 태그를 사용하고 이미지 출력 시 figure 태그로 감싸며, img 태그에서 alt(설명)칸에 부연 설명을 넣는 등의 작업을 잊지 말도록 합시다!

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자.
이번에 만들 웹 사이트의 유형은 카드 유형 섹션 심화편이며 지난 번 카드 유형이 진라면 순한맛이라면 이번 편은 불닭, 마라맛이니 각오하자🥵.

HTML 소스

웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고 img 태그에서의 alt 기능도 적극 활용할 것.
자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것.

<body>
    <section id="cardType03" class="card__wrap score section">
        <h2 class="blind">포트폴리오 구경하기</h2> <!-- 스크린리더기에는 읽히게 하되 겉으론 안보이게 하려면 blind 처리하기 -->
        <div class="card__inner container">
            <article class="card">
                <figure class="card__header">
                    <img src="img/card3_bg01.jpg" alt="김민주의 포트폴리오">
                    <figcaption># Editorial Design</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>
                        김민주의 감성 넘치는 포트폴리오,<br>같이 구경하실래요?
                    </h3>
                    <p>
                        수험생 시절 받았던 스트레스를 늘 감성 카페를 찾아다니며 풀던 나는 감성 없이는 살 수 없는 사람이 되었고
                        그렇게 나는 감성적인 사진들만을 올리는 인스타 계정을 생성하게 되었다.    
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Minju Kim <em>9 resources</em></h4>
                    <span><img src="img/card_bg03_icon01.png" alt="김민주"></span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card3_bg02.jpg" alt="박지수의 포트폴리오">
                    <figcaption># Front-End</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>
                        코딩천재 박지수의 포트폴리오,<br>
                        한 번 볼래?😎
                    </h3>
                    <p>
                        어린 시절부터 난 이과 머리였다. 학창시절 12년동안 단 한 번도 수학을 포기한 적이 없었으며 그런 나에게 코딩이란
                        너무나도 즐거운 취미활동이었으며 자연스럽게 개발자를 꿈꾸게 되었다.
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Jisu Park <em>8 resources</em></h4>
                    <span><img src="img/card_bg03_icon02.png" alt="박지수"></span>
                </div>
            </article>
            <article class="card">
                <figure class="card__header">
                    <img src="img/card3_bg03.jpg" alt="한민철의 포트폴리오">
                    <figcaption># 3D Artist</figcaption>
                </figure>
                <div class="card__contents">
                    <h3>
                        3D 아티스트가 되고 싶은 한민철의<br>
                        포트폴리오, 봐 주세요😘
                    </h3>
                    <p>
                        C4D를 처음 배운 그 순간 나는 결심했다. 반드시 3D 그래픽을 전공하겠다고 말이다. 난 이 분야의 아티스트로 
                        성공해 돈방석에 앉는 것을 목표로 앞으로 나아갈 것이다.
                    </p>
                </div>
                <div class="card__footer">
                    <h4>Mincheol Han <em>7 resources</em></h4>
                    <span><img src="img/card_bg03_icon03.png" alt="한민철"></span>
                </div>
            </article>
        </div>
    </section>
</body>

CSS 소스

reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다.
자세한 설명은 아래 예시 코드의 주석처리된 내용을 참조할 것.

<style>
    /* fonts */
    @import url('https://webfontworld.github.io/score/SCoreDream.css');

    .score {
        font-family: 'SCoreDream';
        font-weight: 300;
    }

    /* 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;  /* 1200px에서 좌우로 20px 패딩값 준거 빼서 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;
        text-align: center;
        margin-bottom: 70px;
        color: #666;
    }

    /* 스크린리더기에는 읽히게 하되 겉으론 안보이게 
        하고자 하는 속성에 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.333%;
        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; /* figcaption을 고정할 위치 */
    }
    .card__header img {
        border-radius: 10px;
        box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }
    .card__header figcaption {
        padding: 6px 16px;
        border-radius: 50px;
        background-color: #fff;
        position: absolute; /* 위치를 card__header쪽으로 옮김 */
        right: 10px;
        top: 10px;
        text-align: center;
        font-size: 14px;
        color: #7b7b7b;
    }

    .card__contents h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 10px;
        
        /* 2줄효과 */
        overflow: hidden;
        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;
        margin-bottom: 30px;

        /* 3줄효과 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
    }

    /* 카드 하단 유저 정보 */
    .card__footer {
        display: flex;  /* 플렉스로 떨어진 것들 붙이기 */
        justify-content: flex-end;  /* 아이템 끝(우측)으로 정렬 */
    }
    .card__footer h4 {
        text-align: right;
        color: #dd2a2a;
    }
    .card__footer em {
        display: block;
        color: #666;
        font-style: normal;
    }
    .card__footer span {
        width: 40px;
        height: 40px;
        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);
    }
</style>

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 (6)	2022.08.20
[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 (2)	2022.08.17
[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 (2)	2022.08.17
[사이트 만들기] 카드(8개) 유형 섹션 만들기 (11)	2022.08.09
[사이트 만들기] 카드 유형 섹션 만들기 (8)	2022.08.08

코딩공책📚

[사이트 만들기] 카드 유형 섹션 만들기 심화편

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 카드 유형 섹션 만들기 심화편

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바