텍스트 타입 03

텍스트 타입 03

이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다.

Site HTML

사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다.

    <section id="textType" class="text__wrap nexon section">
        <h2>Review</h2>
        <p>이용하신 분들에 후기입니다.</p>
        <div class="text__inner container">
            <article class="text">
                <div class="text__body">
                    <p class="desc">
                        이 디자인 나쁘지 않은 것 같아요! 첨에는 살까 말까 망설여 졌는데 나쁘지도 않고 계속 입다보니깐 맘에 듭니다. 역시 믿고 사길 잘했네여!
                    </p>
                </div>
                <div class="desc2">
                    <figure class="circle">
                        <img src="img/Coffee.svg" alt="Coffee">
                    </figure>
                    <h2>
                        안현규
                        <img src="img/star.svg" class="star" alt="star">
                    </h2>
                    <p>지나가는 시민</p>
                </div>
                <div class="good">
                    <p>자세히 보기</p>
                </div>
            </article>
            <article class="text">
                <div class="text__body">
                    <p class="desc">
                        아 이번에 춤을 춰야하는데, 뭘 춰야 할 지... 이거 떨어질거라 생각을 못해봤는데, 시간을 다시 돌릴 수 있을까라고 생각을 해봅니다. 첫 데뷔를 이렇게 하다니 너무 좋네여!
                    </p>
                </div>
                <div class="desc2">
                    <figure class="circle">
                        <img src="img/Coffee.svg" alt="Coffee">
                    </figure>
                    <h2>
                        이강현
                        <img src="img/star.svg" class="star" alt="star">
                    </h2>
                    <p>마피아</p>
                </div>
                <div class="good">
                    <p>자세히 보기</p>
                </div>
            </article>
            <article class="text">
                <div class="text__body">
                    <p class="desc">
                        오오! 너무 맘에 들어요. 이거 사이즈도 너무 잘 맞고 인생 핏을 찾은 것 같습니다..!! 조아요!
                    </p>
                </div>
                <div class="desc2">
                    <figure class="circle">
                        <img src="img/Coffee.svg" alt="Coffee">
                    </figure>
                    <h2>
                        서지우
                        <img src="img/star.svg" class="star" alt="star">
                    </h2>
                    <p>조커</p>
                </div>
                <div class="good">
                    <p>자세히 보기</p>
                </div>
            </article>
        </div>
    </section>

Site CSS

사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다.

            /* fonts */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

    .nexon {
        font-family: "NexonLv1Gothic";
        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: 70px;
    }
    .section > h3 {
        font-size: 16px;
        line-height: 1;
        text-align: center;
        margin-bottom: 10px;
        text-decoration: underline;
    }
    .section > p {
        font-size: 22px;
        font-weight: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* textType */
    .text {
        width: 346px;
        height: 224px;
        margin-bottom: 20px;
        padding: 20px;
    }
    .text:hover {
        background: #f1f1f1;
        border-radius: 15px;
        transition: all 0.3s ease-in;
    }
    .text__inner {
        display: flex;
        flex-wrap: wrap;
    }
    .circle {
        width: 24px;
        height: 24px;
        padding: 18px;
    }
    .desc {
    }
    .desc > h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .desc > p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .one01 {
        width: 60px;
        height: 60px;
        background: #FFFADD;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .one02 {
        width: 60px;
        height: 60px;
        background: #DAFFEF;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .one03 {
        width: 60px;
        height: 60px;
        background: #E4F2FF;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .one04 {
        width: 60px;
        height: 60px;
        background: #FFE2E2;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .one05 {
        width: 60px;
        height: 60px;
        background: #E1FAFF;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .one06 {
        width: 60px;
        height: 60px;
        background: #FDEFFF;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .the {
        text-decoration: underline;
    }

코드 원본 보기

결과물

원본 사이트 보기