[사이트 만들기] 카드(8개) 유형 섹션 만들기

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

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

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자.
이번에 만들 웹 사이트의 유형은 카드(8개) 유형 섹션이다.

HTML 소스

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

<body>
    <section id="cardType02" class="card__wrap gmarket section">
        <h2>포트폴리오 만들기</h2>
        <p>
            취업용 포트폴리오, 어떻게 만들지 고민되시나요? 걱정하지 마세요☺<br>
            저희 학원에서 포트폴리오 제작 과정을 꼼꼼하고 자세하게 다 알려드립니다! 
        </p>
        <div class="card__inner container gray">
            <article class="card">
                <img src="img/card2_bg01.jpg" alt="아이디어 스케치">
                <h3 class="title">아이디어 스케치</h3>
                <p class="desc">
                    무(無)에서 유(有)를 창조할 수는 없습니다. 리서치와 아이디어 스케치를 통해 포트폴리오를 구성할 것입니다.
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg02.jpg" alt="팀 만들기">
                <h3 class="title">팀 만들기</h3>
                <p class="desc">
                    실무에서 팀 워크는 매우 중요하며
                    팀원끼리의 커뮤니케이션 능력과 협동력이 요구됩니다. 팀 만들기를…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg03.jpg" alt="설문 조사">
                <h3 class="title">설문 조사</h3>
                <p class="desc">
                    팀원 구성을 마치고 주제를 다 정했다면 바깥으로 나가 직접 주제를 바탕으로 한 설문 조사를 하도록 합…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg04.jpg" alt="문제 해결하기">
                <h3 class="title">문제 해결하기</h3>
                <p class="desc">
                    설문 조사 결과를 바탕으로 사람들이 직면하는 문제와 불편 사항을 해결할 방법에 대해 팀원들과 토론…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg05.jpg" alt="아이디어 도출">
                <h3 class="title">아이디어 도출</h3>
                <p class="desc">
                    팀원들과의 토론 끝에 아이디어를 도출해내는 시간을 갖습니다. 포스트잇도 붙여가면서 즐겁게 문제…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg06.jpg" alt="와이어프레임 구상">
                <h3 class="title">와이어프레임 구상</h3>
                <p class="desc">
                    이제 문제 해결 방법도 무사히 도출해냈으니 와이어프레임을 구상해보도록 하죠. 이런 식으로 스마트폰…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg07.jpg" alt="GUI 구상">
                <h3 class="title">GUI 구상</h3>
                <p class="desc">
                    Fimga나 XD 등의 프로그램을 이용하여 GUI를 구상해내도록 합시다. 위와 같이 스마트폰으로 테스…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
            <article class="card">
                <img src="img/card2_bg08.jpg" alt="코딩 작업">
                <h3 class="title">코딩 작업</h3>
                <p class="desc">
                    이제 코딩을 통해 앱 스토어에 출시된 앱들과 마찬가지로 서비스를 실체화시켜보도록 합니다. 팀원들과…
                </p>
                <a class="more" href="#"><span class="ir">더 보기</span></a>
            </article>
        </div>
    </section>
</body>

CSS 소스

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

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

    .gmarket {
        font-family: 'GmarketSans';
        font-weight: 500;
    }

    /* 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;
        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;
    }
    /* .gray {
        background-color: #f5f5f5;
    } 
    카드 영역이 잘 들어왔는지 테스트하는 용도. 테스트 마치면 주석처리하기
    */

    /* ir 효과 (이미지 대체 효과 == alt) */
    /* 화면상에서는 안나오게 함과 동시에 스크린리더기에는 읽히게 하는 작업 */
    .ir {
        display: block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }

    /* cardType02 */
    .card__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .card__inner .card {
        width: 24%;
        position: relative;     /* .more 포지션 기준점 */
    }
    .card__inner .card:first-child {
        margin-bottom: 50px;
    }
    .card__inner .card img {
        margin-bottom: 20px;
        border-radius: 10px;
    }
    .card__inner .card .title {
        font-size: 28px;
        margin-bottom: 10px;
        /* 한 줄 효과 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 30px;    /* 제목 길어져도 한 줄 유지 */
    }
    .card__inner .card .desc {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.4;
        color: #666;
        /* 3줄효과 : 글이 넘쳐도 3줄을 넘지 않도록 해줌 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
    }
    .card__inner .card .more {
        width: 24px;
        height: 24px;
        background-image: url(img/arrow.svg);
        display: block;     /* 24x24 사이즈 잡기 위해 사용 */
        position: absolute;
        right: 0;
        top: 230px;
        border-radius: 5px;
    }
</style>

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

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

코딩공책📚

[사이트 만들기] 카드(8개) 유형 섹션 만들기

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 카드(8개) 유형 섹션 만들기

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

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바