728x90
텍스트유형02
오늘은 사이트의 텍스트유형 두 번째를 만들어 보았습니다. 제목이 왼쪽에 있는 유형입니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다.
2. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다.
<body>
<section id="textType02" class="text__wrap gmarket section">
<div class="text__inner container">
<div class="text_left">
<p class="tit">CANADA</p>
<h2>캐나다(CA)<br> 여행소개</h2>
<p>캐나다로 여행하는 사람들을 위한 여행소개입니다. 즐거운 여행 되세요 !</p>
</div>
<div class="text_right">
<article class="text">
<div class="icon icon1">
<img src="img/icon1.svg" alt="아이콘1">
</div>
<h3 class="text_tit">밴쿠버</h3>
<p class="text_desc">
캐나다의 서부에 위치한 밴쿠버입니다. 밴쿠버는 2010년 동계올림픽이 개최된 곳입니다. 살기 좋은 도시 순위에서 매년 5위 안에 손꼽히는 인기 지역입니다.
</p>
</article>
<article class="text">
<div class="icon icon2">
<img src="img/icon2.svg" alt="아이콘2">
</div>
<h3 class="text_tit">토론토</h3>
<p class="text_desc">
캐나다에서 규모가 큰 도시입니다. 주변 도시들에서 볼거리가 많은 곳으로, 김연아 선수가 스케이트 탄 곳도 구경할 수 있습니다.
</p>
</article>
<article class="text">
<div class="icon icon3">
<img src="img/icon3.svg" alt="아이콘3">
</div>
<h3 class="text_tit">퀘벡</h3>
<p class="text_desc">
캐나다의 퀘벡입니다. 도깨비 촬영지로 유명한 곳인데요. 지명은 강이 좁아지는 곳을 뜻한다고 합니다.
</p>
</article>
<article class="text">
<div class="icon icon4">
<img src="img/icon4.svg" alt="아이콘4">
</div>
<h3 class="text_tit">나이아가라 폭포</h3>
<p class="text_desc">
캐나다의 나이아가라 폭포입니다. 미국에서도 볼 수 있지만 캐나다에서 보는 경관이 더 좋다고 합니다.
</p>
</article>
</div>
</div>
</section>
</body>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. n줄 효과도 넣어줍니다.
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: 'GmarketSans';
font-weight: 500;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
.container {
width: 1160px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.text_left {
width: 20%;
}
.text_left .tit {
padding: 4px 58px;
display: inline-block;
line-height: normal;
background-color: #ff2d2d;
border-radius: 50px;
color: #fff;
font-size: 18px;
font-weight: 300;
margin-bottom: 10px;
}
.text_left>h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 25px;
}
.text_left>p {
font-size: 20px;
line-height: 1.4;
}
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text_right {
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
width: 43%;
margin-bottom: 20px;
padding: 20px;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
margin-bottom: 10px;
text-align: center;
line-height: 75px;
}
.text .icon1 {
background-color: #dababa;
}
.text .icon2 {
background-color: #f5d1f9;
}
.text .icon3 {
background-color: #f0e9a7;
}
.text .icon4 {
background-color: #c0fdc6;
}
.text_tit {
font-size: 24px;
margin-bottom: 10px;
}
.text_desc {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]헤더유형 01 (4) | 2022.09.01 |
|---|---|
| [웹 사이트 제작]텍스트유형 03 (4) | 2022.08.31 |
| [웹 사이트 제작]텍스트유형 01 (2) | 2022.08.30 |
| [웹 사이트 제작]이미지유형 03 (3) | 2022.08.19 |
| [웹 사이트 제작]이미지유형 02 (2) | 2022.08.17 |
댓글