사이트 만들기 - 텍스트 유형03

사이트 만들기

텍스트 유형03

---

Figma

일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다.

HTML

한 영역을 텍스트로 클래스 선언하고 그 내부도 위 가운데 아래로 나눕니다

코드보기

<section id="textType03" class="text__wrap nexon section">
    <h2>겨울왕국</h2>
    <p>팝송 듣다가 문득 겨울왕국 노래가 나오길래 써보는 일기장</p>
    <div class="text__inner container">
        <article class="text">
            <div class="top">
                <p class="desc">
                    나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가
                    언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데
                    합격할수 있을까.. 잠이 계속 든다.. 눈도 감긴다.. 눈이 감겨서
                    눈이 오는 겨울왕국노래가 나오는건가.. 내가 무슨소리 하고있는지
                    나도모르겠다. 아무튼 모두 시험 화이팅 합격기원
                </p>
            </div>
            <div class="mid">
                <figure class="icon_box" style="background-color: #7a7878;">
                    <img src="img/type03_icon01.png" alt="icon">
                </figure>
                <p class="tit">김엘사</p>
                <p class="tit_2">만 37세</p>
            </div>
            <figure class="icon_star">
                <img src="img/type03_icon04.png" alt="icon">
            </figure>
            <div class="bottom">
                <a href="#">자러 가기</a>
            </div>
        </article>
        <article class="text">
            <div class="top">
                <p class="desc">
                    나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가
                    언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데
                    합격할수 있을까.. 잠이 계속 든다.. 눈도 감긴다.. 눈이 감겨서
                    눈이 오는 겨울왕국노래가 나오는건가.. 내가 무슨소리 하고있는지
                    나도모르겠다. 아무튼 모두 시험 화이팅 합격기원
                </p>
            </div>
            <div class="mid">
                <figure class="icon_box" style="background-color: #f7e2e1;">
                    <img src="img/type03_icon02.png" alt="icon">
                </figure>
                <p class="tit">이안나</p>
                <p class="tit_2">만 36세</p>
            </div>
            <figure class="icon_star">
                <img src="img/type03_icon05.png" alt="icon">
            </figure>
            <div class="bottom">
                <a href="#">자러 가기</a>
            </div>
        </article>
        <article class="text">
            <div class="top">
                <p class="desc">
                    나는 팝송을 듣고있었는데 왜 몇년전 노래가 나오는가
                    언젯적 Into the unknown인가.. 노래는 좋네..내일 시험인데
                    합격할수 있을까.. 잠이 계속 든다.. 눈도 감긴다.. 눈이 감겨서
                    눈이 오는 겨울왕국노래가 나오는건가.. 내가 무슨소리 하고있는지
                    나도모르겠다. 아무튼 모두 시험 화이팅 합격기원
                </p>
            </div>
            <div class="mid">
                <figure class="icon_box" style="background-color: #e4fec9;">
                    <img src="img/type03_icon03.png" alt="icon">
                </figure>
                <p class="tit">크리스토프</p>
                <p class="tit_2">만 24세</p>
            </div>
            <figure class="icon_star">
                <img src="img/type03_icon04.png" alt="icon">
            </figure>
            <div class="bottom">
                <a href="#">자러 가기</a>
            </div>
        </article>
    </div>
</section>

CSS

폰트는 넥슨폰트 써줍시다. 나머지 간격과 위치는 피그마를 보면서 완성 해줍시다.

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

    .nexon {
        font-family: "NexonLv1Gothic";
        font-weight: 400;
    }
    body {
        background-color:#f6f8fd;
    }

    /* reset */
    * {
        margin: 0;
        padding: 0;
    
    }
    a {
        text-decoration: none;
        color: #000;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;            
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {
        font-size: 50px;
        line-height: normal;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .section > p {
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        margin-bottom: 70px;
        color: #666;
    }
    /* textType03 */
    .text__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        width: 29%;
        position: relative;
    }
    .top {
        border-bottom: 1px solid #f5f5f5d7;
        margin-bottom: 20px;
        height: 195px;
    }
    
    .desc {
        font-size: 18px;
        text-align: left;
        line-height: 1.4;
    }
    .mid {
        display: flex;
        margin-bottom: 19px;
    }
    .icon_box {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 18px;
    }
    .icon_box img {
        position: absolute;
        margin: 0;
        top: 253px;
        left: 38px;
    }
    .tit {
        font-size: 24px;
        font-weight: bold;
        text-align: left;

    }
    .tit_2 {
        font-size: 18px;
        color: #666;
        margin-left: 11px;
        margin-top: 10px;
    }
    .icon_star {
        position: absolute;
        top: 270px;
        left: 98px;
    }
    .bottom {
        border-top: 1px solid #f5f5f5d7;
    }
    .bottom a {
    display: block;
    margin: 0 auto;
    width: 130px;
    height: 30px;
    border-radius: 50px;
    color: #fff;
    background-color: #4B57E3;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
}

결과

원본 소스 보기 원본 사이트 보기

---