텍스트 유형 (3)

728x90

⭐️ 텍스트 유형 03 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다.

02. 상자(div) 만들기 : <body>

    <section id="textType 03" class="text__wrap gmarket section">
    <h2>사용 후기</h2>
    <p>바디워시를 사용하신 분들의 후기를 참고해보세요!</p>
    <div class="text__inner container">
        <article class="text__box">
            <p class="desc">
                아토피가 심한 피부라, 늘 많은 것을 따져보며 구매하는데요. 제품이 천연 성분이라는 것과, 자극이 거의 없다는 리뷰 보고 구매해봤어요. <br>
                제형은 엄청 물 같이 묽고, 인위적이지 않은 향에 저자극 맞습니다..! <br>
                큰 기대하지 않고 구매했는데 상당히 만족스러워요 ^*^ <br>
                다만 타월 사용하지 않고 손으로 문지르
            <div class="text__info">
                <img src="img/text_bg03_icon01.png" alt="웃는 얼굴 아이콘">
                <div class="user">
                    <h3>sumi*** <span>22.08.31</span></h3>
                    <h4>⭐️⭐️⭐️⭐️⚝</h4>
                </div>
            </div>
            <div class="more">
                <a href="#">자세히 보기</a>
            </div>
        </article>
        <article class="text__box">
            <p class="desc">
                세안제와 바디제품을 더 순한 제품으로 바꿔야겠다 하면서 찾아보다가 발견했어요. <br>
                주문한 샴푸가 아직 안 와서 - 올인원이라길래 머리 감아봤는데, 샴푸만 했을 때는 뻣뻣해서 트리트먼트는 꼭 함께 사용해야 할 듯 하네요. <br>
                저는 세안과 바디 전용으로 사용할 거라서 만족합니다. 개인적으로 미끌거림이 
            </p>
            <div class="text__info">
                <img src="img/text_bg03_icon02.png" alt="웃는 얼굴 아이콘">
                <div class="user">
                    <h3>arra*** <span>22.08.28</span></h3>
                    <h4>⭐️⭐️⭐️⭐️⚝</h4>
                </div>
            </div>
            <div class="more">
                <a href="#">자세히 보기</a>
            </div>
        </article>
        <article class="text__box">
            <p class="desc">
                여기 정착이요!! 돌아보니 벌써 5통이나 사용했답니다. <br>
                에센스 제품 사용해보고 너무 순하고 좋아서 바디도 경험해봤는데, 어느새 이렇게 빈 통이 늘었네요. ㅎㅎ <br>
                유명한 바디 제품 다양하게 사용해봤는데 제 피부에는  이 제품이 딱입니다. <br>
                인생 바디워시 찾았어요. 앞으로도 계속 만들어주셔야 해요 ㅠㅠ♡ 꼭이요!!
            </p>
            <div class="text__info">
                <img src="img/text_bg03_icon03.png" alt="웃는 얼굴 아이콘">
                <div class="user">
                    <h3>chip*** <span>22.08.25</span></h3>
                    <h4>⭐️⭐️⭐️⭐️⭐️</h4>
                </div>
            </div>
            <div class="more">
                <a href="#">자세히 보기</a>
            </div>
        </article>
    </div>
</section>

02. style(css) 설정하기 : <style>

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

    .gmarket {
        font-family: 'GmarketSans';  /* 폰트 지정 */
        font-weight: 300;    /* 폰트 두께 설정 */
    }

    /* reset */
    * {
        margin: 0;     /* 기본 브라우저의 빈 공간 없애기 */
        padding: 0;
    }
    body {
        background-color: #FDF3EF;
    }
    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: 1160;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {        /*   >  바로 밑에 있는 자식을 선택 */
        font-size: 50px;
        line-height: 1;   /* 줄간격 설정 */
        text-align: center;   /* 글자 중앙 정렬 */
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 20px;
        font-weight: 500;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }

    /* textType 03 */
    .text__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text__box {
        background-color: #fff;
        width: 32%;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 10px;
    }
    .text__box:hover {
        background-color: #fff8cd;
    }
    .text__box .desc {
        font-size: 18px;
        color: #555;
        line-height: 1.2;
        padding-bottom: 20px;
        border-bottom: 1px dashed #d9d9d9;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 9;   /* clamp 줄바꿈 9줄 이상 되면 ... 으로 바뀜 - 검색해서 사용 */
        -webkit-box-orient: vertical;
    }
    .text__info {
        margin-top: 20px;
        display: flex;
        padding-bottom: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-bottom: 1px dashed #d9d9d9;
    
    }
    .text__info img{
        width: 60px;
        padding: 0 10px 0 0;
    }
    .text__info .user {
        display: inline;
    }
    .text__info .user h3 {
        font-size: 22px;
        padding: 0 0 0 5px;
    }
    .text__info .user h3 > span {
        font-size: 14px;
        color: #666;
    }
    .text__info .user h4 {
        font-size: 22px;
    }
    .text__box .more {
        width: 120px;
        height: 26px;
        background-color: #FF753D;
        border-radius: 50px;
        text-align: center;
        line-height: 26px;
        margin-left: 96px;
    }
    .text__box .more a {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'CSS > Layout_Site' 카테고리의 다른 글

헤더 유형 (1) (2)	2022.09.02
이미지 텍스트 유형 (1) (3)	2022.09.02
텍스트 유형 (2) (2)	2022.09.01
텍스트 유형 (1) (2)	2022.09.01
이미지 유형 (3) (2)	2022.08.22

깜냥깜냥🐾코딩 혜윰

텍스트 유형 (3)

⭐️ 텍스트 유형 03 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

댓글

티스토리툴바

텍스트 유형 (3)

⭐️ 텍스트 유형 03 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

관련글

댓글

티스토리툴바