728x90
텍스트유형01
오늘은 사이트의 텍스트유형을 만들어 보았습니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 마우스오버 했을 때 배경색을 바꿔주기 위해 한 영역에만 배경색을 주었습니다.
2. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다.
<section id="textType01" class="text__wrap Nexon section">
<p>텍스트 유형01</p>
<h2>반려견 기르기</h2>
<div class="text__inner container">
<article class="text">
<div class="icon1">
<img class="img1" src="img/icon1.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 산책</h3>
<p class="text__desc">
반려견 산책을 위한 설명입니다. 반려견 산책 시 주의할 점과 준비물의 소개가 있습니다. 산책하기 좋은 장소도 소개되어 있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
<article class="text">
<div class="icon2">
<img class="img2" src="img/icon2.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 간식</h3>
<p class="text__desc">
반려견 간식을 위한 설명입니다. 반려견 간식 구입처 등을 알 수 있고, 인기 많은 간식을 확인할 수 있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
<article class="text">
<div class="icon3">
<img class="img3" src="img/icon3.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 건강</h3>
<p class="text__desc">
반려견 건강과 관련한 설명입니다. 반려견이 아플 때 대처 방법들과 병원 소개가 담겨있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
<article class="text">
<div class="icon4">
<img class="img4" src="img/icon4.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 커뮤니티</h3>
<p class="text__desc">
반려견들을 위한 커뮤니티입니다. 견주들끼리 반려견의 정보를 공유할 수 있고, 함께 산책할 수도 있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
<article class="text">
<div class="icon5">
<img class="img5" src="img/icon5.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 훈련</h3>
<p class="text__desc">
반려견 훈련을 위한 설명입니다. 반려견의 배변훈련, 사회성 훈련, 사회성 훈련 등을 확인할 수 있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
<article class="text">
<div class="icon6">
<img class="img6" src="img/icon6.svg" alt="반려견 산책">
</div>
<h3 class="text__tit">반려견 옷</h3>
<p class="text__desc">
반려견 옷을 위한 설명입니다. 반려견이 산책 시 입을 옷, 비 올 때 입을 옷 등이 있습니다. 인기많은 옷도 확인할 수 있습니다.
</p>
<a class="btn" href="#" title="더보기" >더보기</a>
</article>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. 마우스오버 효과도 넣어줍니다.
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.Nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 70px;
}
.section>p {
font-size: 16px;
font-weight: 300;
color: #000;
text-align: center;
margin-bottom: 10px;
}
/* textType */
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
width: 29%;
padding: 20px;
}
.text:hover {
background-color: #f5f5f5;
}
.icon1 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #e7bbbb;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.icon2 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #dababa;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.icon3 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #f5d1f9;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.icon4 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #96acfb;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.icon5 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #bff0a7;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.icon6 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #c0fdc6;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.text__tit {
font-size: 24px;
margin-bottom: 10px;
}
.text__desc {
font-size: 18px;
color: #666;
line-height: 1.4;
margin-bottom: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.btn {
font-size: 16px;
font-weight: 300;
color: #666;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]텍스트유형 03 (4) | 2022.08.31 |
|---|---|
| [웹 사이트 제작]텍스트유형 02 (4) | 2022.08.31 |
| [웹 사이트 제작]이미지유형 03 (3) | 2022.08.19 |
| [웹 사이트 제작]이미지유형 02 (2) | 2022.08.17 |
| [웹 사이트 제작]이미지유형 01 (3) | 2022.08.17 |
댓글