소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 텍스트 유형03을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_textType01
- 02_textType02
- 03_textType03
- text03_01.html :
디자인
디자인도 간단합니다.
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배너 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background: rgba(0,0,0,0.3); */
}
.section {
padding: 120px 0;
text-align: center;
}
.section > h2 {
font-size: 50px;
font-weight: 500;
margin-bottom: 20px;
line-height: 1;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
line-height: 1.5;
color: #777;
}
.section__desc em {
font-style: normal;
text-decoration: underline;
text-underline-position: under;
}
/* textType */
.review__inner {
display: flex;
justify-content: space-between;
text-align: left;
}
.review__inner .review {
width: 32%;
background: #fff;
padding: 30px;
box-sizing: border-box;
border-radius: 10px;
}
.review__desc {
font-size: 18px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
padding-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
margin-bottom: 20px;
min-height: 210px;
}
.review__info {
padding-left: 60px;
position: relative;
}
.review__info:before {
content: '';
width: 48px;
height: 48px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.review__info.icon1:before {
background: url(https://webstoryboy.github.io/web2022/webs_img/text03_icon01.png);
background-size: cover;
}
.review__info.icon2:before {
background: url(https://webstoryboy.github.io/web2022/webs_img/text03_icon02.png);
background-size: cover;
}
.review__info.icon3:before {
background: url(https://webstoryboy.github.io/web2022/webs_img/text03_icon03.png);
background-size: cover;
}
.review__info h3 {
font-size: 26px;
font-weight: 500;
}
.review__info h3 em {
font-size: 16px;
font-weight: 300;
}
.review__info .star span {
display: inline-block;
width: 17px;
height: 16px;
background: url(https://webstoryboy.github.io/web2022/webs_img/text03_star.svg);
margin-top: 5px;
}
.review__info .star span.not {
background-position: -19px 0;
}
.review__more {
margin-top: 20px;
text-align: center;
border-top: 1px solid #d9d9d9;
padding-top: 20px;
}
.review__more a {
background: #4857EC;
color: #fff;
padding: 10px 24px;
border-radius: 20px;
font-size: 14px;
display: inline-block;
}
</style>
</head>
<body>
<section id="textType" class="review__wrap section gray gmarket">
<h2>스터디 후기</h2>
<p>취업을 축하해요😍 정성스러운 후기 감사합니다.</p>
<div class="review__inner container">
<article class="review">
<p class="review__desc nexon">
불과 3달전만해도 여러 원인들로 인해 자존감이 밑바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속으로 울고싶다를 외쳤던 저였는데 이제는 조금이나마 이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해있는 제가 되었으면 좋겠네요...버리지 않아주셔서 감사...합니다
</p>
<div class="review__info icon1">
<h3>이태용 <em>웹스 24기</em></h3>
<div class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="review__more"><a href="#">자세히 보기</a></div>
</article>
<article class="review">
<p class="review__desc nexon">
진심 학교나 학원보다 더 많이 배운거라고 생각하고, 무지하고 말안듣고 자존감바닥인 저를 팩폭도 해주시고, 버리지 않아주셔서 감사...합니다 쌤!!!!!!!!!! 회사에서 잘리지않고,,, 존버하겠습니다!!!!!!!!!!!! 버리지 않아주셔서 감사...합니다
</p>
<div class="review__info icon2">
<h3>이희진 <em>웹스 24기</em></h3>
<div class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="not"></span>
</div>
</div>
<div class="review__more"><a href="#">자세히 보기</a></div>
</article>
<article class="review">
<p class="review__desc nexon">
제가 게을러서 의도치않게 자꾸 말을 안듣는 학생이 되었었지만 정말 선생님 말씀 틀린거 하나도 없었다는거 잘 알고있습니다,,, ㅎㅎ 아 그리고 마지막 하고 싶은 말은 저 새벽 5~6시에 자는 ㄹㅇ올빼미형인간인데... 쌤이랑 두달 공부했다고.....
</p>
<div class="review__info icon3">
<h3>정승연 <em>웹스 24기</em></h3>
<div class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="review__more"><a href="#">자세히 보기</a></div>
</article>
</div>
</section>
</body>
</html>
view2
view3
view4
참고
728x90
