텍스트 사이트 03

텍스트 사이트 03

텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다.

01. figma

간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다.

이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다.

02. HTML

HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다.

    <section id="textTyle03" class="text__wrap eland section">
        <h2>스터디 후기</h2>
        <p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다.</p>
        <div class="text__inner container">
            <article class="twwt">
                <div class="box__block">
                    <p class="text__desc">
                        불과 3달전만해도 여러 원인들로 인해 자존감이 및바닥이였던 
                        저에게 이 스터디는 너무 소중한 시간이었어요. 
                        매일 마음속으로 울고싶다를 외치던 저였는데 이제는 조금이나마 
                        이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 
                        많이 발전해 있는 제가 되었으면 좋겠네요....
                    </p>
                    <div class="line"></div>
                    <div class="box__bottom">
                        <span class="img__svg img01"></span>
                        <div class="hive">
                            <h3 class="name__bottom">이태용</h3>
                            <img src="../site_img/stra_5.svg" alt="">
                        </div>
                        <div class="wed__24">웹스 24기</div>
                    </div>
                    <div class="line02"></div>
                    <div class="link__go"><a href="#">자세히 보기</a></div>
                </div>
            </article>
            <article class="twwt">
                <div class="box__block">
                    <p class="text__desc">
                        진심 학교나 학원보다 더 많이 배운거라고 생각하고, 
                        무지하고 말안듣고 자존감 바닥인 저를 팩폭도 해주시고, 
                        버리지 않아주셔서 감사....합니다 쌤!!!!!!!!!
                        회사에서 잘리지 않고,.. 존버하겠습니다!!!!!!!!
                    </p>
                    <div class="line"></div>
                    <div class="box__bottom">
                        <span class="img__svg img02"></span>
                        <div class="hive">
                            <h3 class="name__bottom">이희진</h3>
                            <img src="../site_img/stra_5.svg" alt="">
                        </div>
                        <div class="wed__24">웹스 24기</div>
                    </div>
                    <div class="line02"></div>
                    <div class="link__go"><a href="#">자세히 보기</a></div>
                </div>
            </article>
            <article class="twwt">
                <div class="box__block">
                    <p class="text__desc">
                        제가 게을러서 의도치않게 자꾸 말을 안듣는 학생이 되어있었지만 
                        정말 선생님 말씀 틀린거 하나도 없었다는거 잘 알고 있습니다.. ㅎㅎ
                        아 그리고 마지막 하고 싶은 말은 저 새벽 5~6시에 가는 ㄹㅇ 
                        올빼미형인간인데... 쌤이랑 두달 공부했다고...
                    </p>
                    <div class="line"></div>
                    <div class="box__bottom">
                        <span class="img__svg img03"></span>
                        <div class="hive">
                            <h3 class="name__bottom">이태용</h3>
                            <img src="../site_img/stra_5.svg" alt="">
                        </div>
                        <div class="wed__24">웹스 24기</div>
                    </div>
                    <div class="line02"></div>
                    <div class="link__go"><a href="#">자세히 보기</a></div>
                </div>
                </article>
        </div>
       
    </section>

03. css

공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다.

    /* line */

    .line {
        border-bottom: 1px solid rgb(199, 199, 199);
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .line02 {
        border-bottom: 1px solid rgb(199, 199, 199);
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /* text__inner */
    .text__inner {
        display: flex;
        flex-wrap: wrap;
    }

    .box__block {
        padding: 30px;
    }

    /* twwt */
    .twwt {
        width: 355px;
        height: 390px;
        background-color: #fff;
        border-radius: 14px;
        margin-left: 20px;
    }
    .twwt .text__desc {
        font-size: 16px;
        /* padding: 30px 30px 20px 30px; */
        font-weight: 300;
        line-height: 1.4;
        letter-spacing: -0.36px;
        text-align: left;

        height: 175px;
        width: 283px;

    }
    .twwt .box__bottom {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .box__bottom  .img__svg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #000;

        background-size: 200px;
        background: url(../site_img/Group\ 3.svg) no-repeat;
    }

    .text__inner .img02 {
        background-position: -50px;
        background-position-y: revert;
    }

    .text__inner .img03 {
        background-position: -100px;
        background-position-y: revert;
    }


    .box__bottom  .hive {
        margin-left: 10px;
    }
    .box__bottom .hive .name__bottom {
        font-size: 20px;
        font-weight: 500;
    }
    .box__bottom  .hive > img {
        width: 72px;
        height: 12px;
    }
    .box__bottom  .wed__24 {
        margin-top: 3px;
        font-size: 14px;
        color: #666;
    }
    

    .twwt .link__go {
        text-align: center;   
        margin-top: 30px;
        
    }
    .twwt .link__go a {
        width: 110px;
        height: 26px;
        border-radius: 50px;
        background-color: #5a87fd;
        color: #fff;
        padding: 8px 11px 8px;
    }

원본 소스 보여주기

원본 사이트 보여주기