텍스트 유형 (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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

깜냥깜냥🐾코딩 혜윰

텍스트 유형 (3)

⭐️ 텍스트 유형 03 ⭐️

01. 레이아웃 구상하기

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

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

03. 결과보기

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

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<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>

	/* 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;
	}

텍스트 유형 (3)

⭐️ 텍스트 유형 03 ⭐️

01. 레이아웃 구상하기

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

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

03. 결과보기

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

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역