728x90
텍스트유형03
오늘은 사이트의 텍스트유형 세 번째를 만들어 보았습니다. 큰 제목과 설명이 있고 세 구역으로 나누어진 유형입니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다.
2. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. 아이콘들은 img 태그를 사용하여 넣어주었습니다.
<section id="textType03" class="text__wrap score section">
<h2>필라테스 후기</h2>
<p>재활필라테스 수강생들의 후기를 소개합니다.</p>
<div class="text__inner container">
<article class="text">
<p>
계속 진행하지 못해서 아쉬울 정도로 만족스러운 수업이었어요! 제 몸 상태랑 컨디션에 맞게 체계적으로 수업 해주시고,
자세도 꼼꼼하게 봐주셔서 운동하는데 도움 이 많이 되었습니다. 허리 통증이 있었는데, 많이 좋아지고 운동 끝나고 집에 가는길에
몸이 가벼워서 항상 기분좋게 돌아갔습니다.
</p>
<div class="user">
<figure class="icon">
<img src="img/icon03_01.svg" alt="">
</figure>
<div class="user__info">
<h3 class="name">서지민 <em>수강생</em></h3>
<figure class="grade">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
</figure>
</div>
</div>
<span class="more"><a href="#">자세히 보기</a></span>
</article>
<article class="text">
<p>
계속 진행하지 못해서 아쉬울 정도로 만족스러운 수업이었어요! 제 몸 상태랑 컨디션에 맞게 체계적으로 수업 해주시고,
자세도 꼼꼼하게 봐주셔서 운동하는데 도움 이 많이 되었습니다. 허리 통증이 있었는데, 많이 좋아지고 운동 끝나고 집에 가는길에
몸이 가벼워서 항상 기분좋게 돌아갔습니다.
</p>
<div class="user">
<figure class="icon">
<img src="img/icon03_01.svg" alt="">
</figure>
<div class="user__info">
<h3 class="name">진수민 <em>수강생</em></h3>
<figure class="grade">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
</figure>
</div>
</div>
<span class="more"><a href="#">자세히 보기</a></span>
</article>
<article class="text">
<p>
계속 진행하지 못해서 아쉬울 정도로 만족스러운 수업이었어요! 제 몸 상태랑 컨디션에 맞게 체계적으로 수업 해주시고,
자세도 꼼꼼하게 봐주셔서 운동하는데 도움 이 많이 되었습니다. 허리 통증이 있었는데, 많이 좋아지고 운동 끝나고 집에 가는길에
몸이 가벼워서 항상 기분좋게 돌아갔습니다.
</p>
<div class="user">
<figure class="icon">
<img src="img/icon03_01.svg" alt="">
</figure>
<div class="user__info">
<h3 class="name">유서연 <em>수강생</em></h3>
<figure class="grade">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
<img src="img/icon03_02.svg" alt="">
</figure>
</div>
</div>
<span class="more"><a href="#">자세히 보기</a></span>
</article>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. n줄 효과도 넣어줍니다.
/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: 'SCoreDream';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #fff;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 45px;
font-weight: 600;
line-height: 1;
text-align: center;
margin-bottom: 25px;
}
.section>p {
font-size: 22px;
font-weight: 500;
color: #666;
text-align: center;
margin-bottom: 75px;
}
/* textType */
body {
background-color: #f5f5f5;
}
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
background-color: #fff;
width: 28%;
padding: 30px 25px;
}
.text p {
font-size: 18px;
line-height: 1.4;
margin-bottom: 25px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
}
.user {
padding: 25px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-bottom: 25px;
display: flex;
flex-wrap: wrap;
}
.text:nth-child(1) .icon {
background-color: #bea8fc;
}
.text:nth-child(2) .icon {
background-color: #fabcbc;
}
.text:nth-child(3) .icon {
background-color: #f5f394;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50px;
text-align: center;
line-height: 85px;
margin-right: 15px;
}
.name {
font-size: 20px;
font-weight: 500;
display: flex;
align-items: baseline;
margin-bottom: 10px;
}
em {
font-size: 14px;
font-weight: 200;
font-style: normal;
margin-left: 5px;
}
.more {
padding: 6px 20px;
margin-left: 100px;
background-color: #a36aff;
border-radius: 30px;
text-align: center;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]이미지/텍스트 유형 01 (5) | 2022.09.01 |
|---|---|
| [웹 사이트 제작]헤더유형 01 (4) | 2022.09.01 |
| [웹 사이트 제작]텍스트유형 02 (4) | 2022.08.31 |
| [웹 사이트 제작]텍스트유형 01 (2) | 2022.08.30 |
| [웹 사이트 제작]이미지유형 03 (3) | 2022.08.19 |
댓글