[사이트 만들기] 텍스트 유형 03

사이트 만들기 : 텍스트 유형 STUDY 03

이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다.
아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다.

Figma

먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것.

HTML 소스

웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것.

<body>
    <section id="cardType03" class="card__wrap gmarket section">
        <h2>가을에 대해 이야기해보자🌾</h2>
        <p>곧 다가올 가을에 대하여 이런저런 이야기들을 해보아요!</p>
        <div class="card__inner container">
            <article class="card">
                <div class="card__body">
                    <p class="desc">
                        비염인인 나에게 가장 고통스러운 계절이 돌아왔다. 많은 이들이 좋아하는 봄과 가을을 싫어하는 이유도 이 빌어먹을 비염 때문이지… 오늘도 콧물이 쉴새없이 흐르는구나🤧 빨리 환절기가 끝나고 겨울이 찾아왔으면 좋겠다. 난 겨울이 제일 좋아🥶
                    </p>
                    <hr>
                    <div class="profile">
                        <span id="card__icon" class="icon__logo1" aria-hidden="김명희">
                            <a href="#" class="link1"><span class="ir">김명희</span></a>
                        </span>
                        <div class="user__name">
                            <h2>김명희</h2>
                            <p>@mh123</p>
                            <span id="star">
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_empty"><span class="ir">별 비워짐</span></a>
                                <a class="star_empty"><span class="ir">별 비워짐</span></a>
                                <a class="star_empty"><span class="ir">별 비워짐</span></a>
                                <a class="star_empty"><span class="ir">별 비워짐</span></a>
                            </span>
                        </div>
                    </div>
                    <hr>
                    <button class="more">
                        <a href="#">자세히 보기</a>
                    </button>
                </div>
            </article>
            <article class="card">
                <div class="card__body">
                    <p class="desc">
                        내가 사계절 중 가장 좋아하는 계절이 온다. 낮이 긴 것을 별로 좋아하지 않는 나에게 일조량이 낮아지고 낮의 길이가 짧아져가는 이 시기는 안정감을 안겨준다. 무엇보다 그 악몽같은 더위가 끝났다는 것에 대한 안도감도 크다. 아무튼 곧 올 가을을 환영한다☺
                    </p>
                    <hr>
                    <div class="profile">
                        <span id="card__icon" class="icon__logo2" aria-hidden="최가을">
                            <a href="#" class="link2"><span class="ir">최가을</span></a>
                        </span>
                        <div class="user__name">
                            <h2>최가을</h2>
                            <p>@autumn_lover</p>
                            <span id="star">
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                            </span>
                        </div>
                    </div>
                    <hr>
                    <button class="more">
                        <a href="#">자세히 보기</a>
                    </button>
                </div>
            </article>
            <article class="card">
                <div class="card__body">
                    <p class="desc">
                        가을은 독서의 계절이지요. 하지만 요즘 바빠서 책 읽을 시간이 없네요. 쨌든 저는 가을이 좋습니다. 앞에 분처럼 저도 비염인이라서 완전히 사랑할 순 없는 애증의 계절이지만요…😂 겨울 혹한과 여름 혹서를 못견딜 정도로 싫어해서일까요? ㅎㅎ
                    </p>
                    <hr>
                    <div class="profile">
                        <span id="card__icon" class="icon__logo3" aria-hidden="이땡땡">
                            <a href="#" class="link3"><span class="ir">이땡땡</span></a>
                        </span>
                        <div class="user__name">
                            <h2>이땡땡</h2>
                            <p>@lee_tt</p>
                            <span id="star">
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_fill"><span class="ir">별 채워짐</span></a>
                                <a class="star_empty"><span class="ir">별 비워짐</span></a>
                            </span>
                        </div>
                    </div>
                    <hr>
                    <button class="more">
                        <a href="#">자세히 보기</a>
                    </button>
                </div>
            </article>
        </div>
    </section>
</body>

CSS 소스

reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다. 아이콘 출력은 이미지 스프라이트와 IR 효과를 적극 활용하도록 한다. 자세한 설명은 아래 예시 코드의 주석처리된 내용을 참조할 것.

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

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

    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #FDF6F6;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    a {
        text-decoration: none;
        color: #fff;
    }
    img {
        width: 100%;    /* 이미지 튀어나온 거 집어넣기 */
    }
    hr {
        margin: 30px 0;
    }
    button {
        border: none;
        font-family: 'GmarketSans';
        cursor: pointer;
    }

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 20px auto;
        min-width: 1160px;  /* 반응형 할 때 없애줄 것 */
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 30px;
    }
    .section > p {
        font-size: 24px;
        text-align: center;
        margin-bottom: 70px;
        font-weight: 500;
        color: #666;
    }

    /* cardType */
    .card__inner {
        display: flex;
        justify-content: space-between;     /* 간격 떨어뜨리기 */
    }
    .card {
        width: 33%;
        background: #fff;
        border-radius: 10px;
        margin-right: 20px;
    }
    #card__icon {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 100%;
        margin-right: 10px;
    }
    /* 아이콘 하나하나에 색깔 넣어주기 */
    .icon__logo1 {
        background-color: #fceceb;
    }
    .icon__logo2 {
        background-color: #ecfceb;
    }
    .icon__logo3 {
        background-color: #fcebfb;
    }

    .card__body {
        padding: 30px;
    }
    .card__body .title {
        font-size: 24px;
        margin-bottom: 10px;
        font-weight: 500;
        /* 한 줄 효과 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 30px;    /* 제목 길어져도 한 줄 유지 */
    }
    .card__body .desc {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        /* 7줄효과 : 글이 넘쳐도 7줄을 넘지 않도록 해줌 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7;  /* 7줄까지 제한 */
        -webkit-box-orient: vertical;
    }
    .card__body .more {
        margin: 0 82px;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        border-radius: 17px;
        background-color: #e1a39f;
        padding: 8px 25px;
    }

    .profile {
        display: flex;
    }
    .user__name > h2 {
        font-size: 28px;
        font-weight: 500;
        position: relative;
    }
    .user__name > p {
        font-size: 18px;
        font-weight: 300;
        position: absolute;
        top: 592px;
        padding-left: 90px;
        font-size: 16px;
        font-weight: 300;
        color: #666;
    }

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

    /* 이미지 스프라이트 */
    /* 아이콘 5개를 이어 만든 프레임을 SVG로 추출하여 그 좌표값을 아래와 같이
        옮겨가며 아이콘 하나씩 보이도록 하는 기법 */
    #card__icon a {
        width: 30px;
        height: 30px;
        display: block;
        background: url(img/textType_icon03.svg);
        padding: 15px;
    }
    /* nth-child가 먹히지 않으니 a의 클래스값을 link1, link2... 이런식으로 바꾸자 */
    #card__icon a.link1 {
        background-position: 0px 0;
    }
    #card__icon a.link2 {
        background-position: -80px 0;
    }
    #card__icon a.link3 {
        background-position: -160px 0;
    }
    
    /* 별점 */
    #star a {
        width: 14px;
        height: 14px;
        display: inline-block;
    }
    #star > .star_fill {
        background: url(img/star.svg);
    }
    #star > .star_empty {
        background: url(img/star_empty.svg);
    }
</style>

최종 결과

원본 사이트 보기

원본 소스 보기

'Site' 카테고리의 다른 글

[사이트 만들기] 이미지/텍스트 유형 01 (8)	2022.09.01
[사이트 만들기] 헤더 유형 01 (4)	2022.09.01
[사이트 만들기] 텍스트 유형 02 (3)	2022.09.01
[사이트 만들기] 텍스트 유형 01 (3)	2022.08.30
[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 (6)	2022.08.20

코딩공책📚

[사이트 만들기] 텍스트 유형 03

사이트 만들기 : 텍스트 유형 STUDY 03

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[사이트 만들기] 텍스트 유형 03

사이트 만들기 : 텍스트 유형 STUDY 03

Figma

HTML 소스

CSS 소스

최종 결과

'Site' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바